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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 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
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
js获取ip和地区
2017/03/10 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
提升Python程序运行效率的6个方法
2015/03/31 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
通过python检测字符串的字母
2020/02/18 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
怎样写好自我鉴定
2013/12/04 职场文书
员工入职担保书范文
2014/04/01 职场文书
高一学生评语大全
2014/04/25 职场文书
写字楼租赁意向书
2014/07/30 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
python套接字socket通信
2022/04/01 Python