溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
用jquery的時候你會發現，頁面渲染后動態生成的dom，在生成之前的代碼是沒辦法取到相應對象的，必須重新獲取.但是vue基于數據綁定的特性讓它能生成的時候直接綁定數據。
html:
<div id="app">
<table v-for="table in tables">
<tr v-for="row in table.row">
<td v-for="item in row">
<input type="text" v-model="item.val" >
<div >{{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再次搜索讀取。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
