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


Posted in Javascript onApril 19, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery事件与函数的使用介绍
Sep 29 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
原生javascript实现分页效果
Apr 21 Javascript
JS实现留言板功能
Jun 17 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
Vue响应式原理详解
Apr 18 #Javascript
详解vue-router基本使用
Apr 18 #Javascript
Vue键盘事件用法总结
Apr 18 #Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 #Javascript
jQuery加密密码到cookie的实现代码
Apr 18 #jQuery
微信小程序实战之自定义模态弹窗(8)
Apr 18 #Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 #Javascript
You might like
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
制作美丽的拉花
2021/03/03 冲泡冲煮
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
php删除数组元素示例分享
2014/02/17 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
Python发送邮件的实例代码讲解
2019/10/16 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
python 利用toapi库自动生成api
2020/10/19 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
技术股份合作协议书
2014/10/05 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
2014年防汛工作总结
2014/12/08 职场文书
滴水洞导游词
2015/02/10 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
乱世佳人观后感
2015/06/08 职场文书
python如何读取.mtx文件
2021/04/22 Python
python如何利用traceback获取详细的异常信息
2021/06/05 Python