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 相关文章推荐
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 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
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
Javascript 获取LI里的内容
2008/12/17 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
ES6新特性一: let和const命令详解
2017/04/20 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
在Python的Django框架中创建和使用模版
2015/07/15 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
windows下python安装pip图文教程
2018/05/25 Python
使用python实现名片管理系统
2020/06/18 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
个人查摆问题自查报告
2014/10/16 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
python中的None与NULL用法说明
2021/05/25 Python
Java Dubbo框架知识点梳理
2021/06/26 Java/Android