vue動態(tài)生成dom并且自動綁定事件
更新時間：2017年04月19日 08:24:11 作者：寒山雪人
本篇文章主要介紹了vue動態(tài)生成dom并且自動綁定事件，具有一定的參考價值，有興趣的可以了解一下。
用jquery的時候你會發(fā)現(xiàn)，頁面渲染后動態(tài)生成的dom，在生成之前的代碼是沒辦法取到相應對象的，必須重新獲取.但是vue基于數(shù)據(jù)綁定的特性讓它能生成的時候直接綁定數(shù)據(jù)。
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>
你會發(fā)現(xiàn)input框輸入的值直接就能在其下面的div里就能改變，直接讀取date里面的數(shù)據(jù)就能獲取相應的表格內的數(shù)據(jù),可以將其直接使用，ajax發(fā)送不需要使用jquery再次搜索讀取。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了在Vue中使用Select選擇器拼接label的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue3不同環(huán)境下實現(xiàn)配置代理，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue中改變選中當前項的顯示隱藏或者狀態(tài)的實現(xiàn)方法
下面小編就為大家分享一篇vue中改變選中當前項的顯示隱藏或者狀態(tài)的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家介紹了Vue mixin實現(xiàn)組件功能復用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10
Vue 3 中的 toRef 和 toRefs 函數(shù)案例講解
這篇文章主要介紹了Vue 3 中的 toRef 和 toRefs 函數(shù),toRef 和 toRefs 函數(shù)是 Vue 3 中的兩個非常有用的函數(shù),它們可以幫助我們更好地管理組件中的響應式數(shù)據(jù),并且可以提高組件的性能和用戶體驗,需要的朋友可以參考下2024-06-06
element-ui圖像組件、上傳組件以及分頁組件實現(xiàn)代碼
工作中碰到需要多圖上傳,在使用element-ui解決過程中碰到一些問題,在這里分享給大家,這篇文章主要給大家介紹了關于element-ui圖像組件、上傳組件以及分頁組件實現(xiàn)的相關資料,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細介紹了Vue3中響應式的一些特殊處理，文中的示例代碼講解詳細，對我們深入了解Vue3有一定的幫助，需要的可以參考一下2023-04-04
這篇文章主要介紹了Element Collapse 折疊面板的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
同時Vue也支持讓開發(fā)者,自己注冊一些指令,這些指令被稱為自定義指令,每個指令都有自己各自獨立的功能,這篇文章主要介紹了Vue自定義指令簡介和基本使用,需要的朋友可以參考2024-03-03
Nuxt引入vue-persistedstate以及踩坑記錄
這篇文章主要介紹了Nuxt引入vue-persistedstate以及踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10