vue動態(tài)生成dom并且自動綁定事件
更新時間：2017年04月19日 08:24:11 作者：寒山雪人
本篇文章主要介紹了vue動態(tài)生成dom并且自動綁定事件，具有一定的參考價值，有興趣的可以了解一下。
用jquery的時候你會發(fā)現(xiàn)，頁面渲染后動態(tài)生成的dom，在生成之前的代碼是沒辦法取到相應(yīng)對象的，必須重新獲取.但是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ù)就能獲取相應(yīng)的表格內(nèi)的數(shù)據(jù),可以將其直接使用，ajax發(fā)送不需要使用jquery再次搜索讀取。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+ElementUi實現(xiàn)點擊表格鏈接頁面跳轉(zhuǎn)和路由效果
這篇文章主要介紹了Vue+ElementUi實現(xiàn)點擊表格中鏈接進(jìn)行頁面跳轉(zhuǎn)和路由,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
vue中 el-table每個單元格包含多個數(shù)據(jù)項處理
vue項目中,我們需要在el-table中顯示數(shù)組數(shù)據(jù),有的時候,需要在一個單元格中顯示多條數(shù)據(jù),如何實現(xiàn)呢,對vue el-table單元格相關(guān)知識感興趣的朋友一起看看吧2023-11-11
使用el-row及el-col頁面縮放時出現(xiàn)空行的問題及解決
這篇文章主要介紹了使用el-row及el-col頁面縮放時出現(xiàn)空行的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue2利用html2canvas+jspdf動態(tài)生成多頁PDF方式
利用vue2結(jié)合html2canvas和jspdf,可以實現(xiàn)前端頁面內(nèi)容導(dǎo)出為PDF的功能,首先需要安裝相關(guān)依賴,使用html2canvas將指定div內(nèi)容捕捉為圖像,再通過jspdf將圖像轉(zhuǎn)換為PDF2024-09-09
在Vant的基礎(chǔ)上實現(xiàn)添加表單驗證框架的方法示例
這篇文章主要介紹了在Vant的基礎(chǔ)上實現(xiàn)添加驗證框架的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue代理模式解決跨域詳解的相關(guān)資料,需要的朋友可以參考下2022-09-09
vuex新手進(jìn)階篇之改變state?mutations的使用
在vue的項目中不可避免的會使用到vuex用于數(shù)據(jù)的存儲,下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之改變state?mutations的使用,文中通過圖文以及實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
本篇文章主要介紹了VueJS組件之間通過props交互及驗證的方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-09-09
今天我們來學(xué)習(xí)一下watch偵聽器的好兄弟?watchEffect?偵聽器。這個相對來說比較簡單，用的不是很多，當(dāng)然了，根據(jù)自己的項目情況自行決定使用，希望對大家有所幫助2022-07-07
這篇文章主要介紹了vue+egg+jwt實現(xiàn)登錄驗證的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05