用jquery的時候你會發現,頁面渲染后動態生成的dom,在生成之前的代碼是沒辦法取到相應對象的,必須重新獲取.但是vue基于數據綁定的特性讓它能生成的時候直接綁定數據。
html:
<div id="app"><table v-for="table in tables"> <tr v-for="row in table.row"> <td style="width:80px;float:left" v-for="item in row"> <input type="text" v-model="item.val" style="width:40px"> <div style="width:40px;float:left">{{item.val}}</div> </td> </tr></table><button v-on:click="add">添加2x2的表格</button></div>js:
<script src="https://unpkg.com/vue/dist/vue.js"></script><script type="text/javascript"> var vm = new Vue({ el : "#app", data:{ tables : [] }, methods:{ add:function(){ row = []; rmax = 2; cmax = 2; for( i = 0; i < rmax; i++){ column = []; for( f = 0; f < cmax; f++){ column = column.concat({ val:"", }); } row.push(column); } this.tables.push({ row:row, }); } } });</script>你會發現input框輸入的值直接就能在其下面的div里就能改變,直接讀取date里面的數據就能獲取相應的表格內的數據,可以將其直接使用,ajax發送不需要使用jquery再次搜索讀取。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答