首页 > 编程 > JavaScript > 正文

vue动态生成dom并且自动绑定事件

2019-11-19 16:47:55
字体:
来源:转载
供稿:网友

用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再次搜索读取。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表