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