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 相关文章推荐
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
vue.js路由跳转详解
Aug 28 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
javascript实现前端input密码输入强度验证
Jun 24 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
对javascript和select部件的结合运用
2006/10/09 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
如何在C# winform中异步调用web services
2015/09/21 面试题
会计自荐书
2013/12/02 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技