vue动态生成dom并且自动绑定事件
更新时间：2017年04月19日 08:24:11 作者：寒山雪人
本篇文章主要介绍了vue动态生成dom并且自动绑定事件，具有一定的参考价值，有兴趣的可以了解一下。
用jquery的时候你会发现，页面渲染后动态生成的dom，在生成之前的代码是没办法取到相应对象的，必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。
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>
你会发现input框输入的值直接就能在其下面的div里就能改变，直接读取date里面的数据就能获取相应的表格内的数据,可以将其直接使用，ajax发送不需要使用jquery再次搜索读取。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue+ElementUi实现点击表格链接页面跳转和路由效果
这篇文章主要介绍了Vue+ElementUi实现点击表格中链接进行页面跳转和路由,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
vue项目中,我们需要在el-table中显示数组数据,有的时候,需要在一个单元格中显示多条数据,如何实现呢,对vue el-table单元格相关知识感兴趣的朋友一起看看吧2023-11-11
使用el-row及el-col页面缩放时出现空行的问题及解决
这篇文章主要介绍了使用el-row及el-col页面缩放时出现空行的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue2利用html2canvas+jspdf动态生成多页PDF方式
利用vue2结合html2canvas和jspdf,可以实现前端页面内容导出为PDF的功能,首先需要安装相关依赖,使用html2canvas将指定div内容捕捉为图像,再通过jspdf将图像转换为PDF2024-09-09
这篇文章主要介绍了在Vant的基础上实现添加验证框架的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了vue代理模式解决跨域详解的相关资料,需要的朋友可以参考下2022-09-09
vuex新手进阶篇之改变state mutations的使用
在vue的项目中不可避免的会使用到vuex用于数据的存储,下面这篇文章主要给大家介绍了关于vuex新手进阶篇之改变state mutations的使用,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
本篇文章主要介绍了VueJS组件之间通过props交互及验证的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-09-09
今天我们来学习一下watch侦听器的好兄弟 watchEffect 侦听器。这个相对来说比较简单，用的不是很多，当然了，根据自己的项目情况自行决定使用，希望对大家有所帮助2022-07-07
这篇文章主要介绍了vue+egg+jwt实现登录验证的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论