vue动态生成dom并且自动绑定事件
内容摘要
这篇文章主要为大家详细介绍了vue动态生成dom并且自动绑定事件,具有一定的参考价值,可以用来参考一下。
对此感兴趣的朋友,看看idc笔记做的技术笔记!
用jquery的时候你会发现,页
对此感兴趣的朋友,看看idc笔记做的技术笔记!
用jquery的时候你会发现,页
文章正文
这篇文章主要为大家详细介绍了vue动态生成dom并且自动绑定事件,具有一定的参考价值,可以用来参考一下。
对此感兴趣的朋友,看看idc笔记做的技术笔记!
用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。
html:
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <code> <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> </code> |
js:
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <code> <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> </code> |
你会发现input框输入的值直接就能在其下面的div里就能改变,直接读取date里面的数据就能获取相应的表格内的数据,可以将其直接使用,ajax发送不需要使用jquery再次搜索读取。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持php教程。
注:关于vue动态生成dom并且自动绑定事件的内容就先介绍到这里,更多相关文章的可以留意
代码注释