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