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

2024-12-03 19:28:27

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue中v-model动态生成的实例详解

vue中v-model动态生成的实例详解前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <
使用Bootstrap和Vue实现用户信息的编辑删除功能

使用Bootstrap实现简单的布局,并结合Vue进行用户信息的编辑删除等功能,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户信息编辑</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.cs
Vue-router路由判断页面未登录跳转到登录页面的实例

如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该
vue 数组和对象不能直接赋值情况和解决方法(推荐)

Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 当第一种情况需求时,可以使用this.$set(this.arr,index,newVal) Vue 不能检测对象属性的添加或删除: 可以使用this.$set(this.person,'age',12) 当需要添加多个对象时,Object.assign({},this.pers
Vue利用路由钩子token过期后跳转到登录页的实例

在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫. 分为全局导航钩子,单个路由独享的钩子,组件内钩子. 三种类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next. 其中next有三个方法 (1)next(); //默认路由 (2)next(false); //阻止路由跳转 (3)next({path:'/'}); //阻止默认路由,跳转到指定路径这里我使用了组件内钩子进行判断token过期后跳转到登录页,
vue路由跳转时判断用户是否登录功能的实现

通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha
vue动态生成dom并且自动绑定事件

用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:le
使用Vue动态生成form表单的实例代码

具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa
关于动态生成dom绑定事件失效的原因及解决方法

之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件失效的原因: (1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取
jQuery为动态生成的select元素添加事件的方法

项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelect =""; 2.在js中写好获取服务端数据的代码 function genVoucherGroupSelect(rowID){ return $(strVoucherGroupSelect).attr("id", "sl_" + rowID).pa
C#动态生成按钮及定义按钮事件的方法

本文实例讲述了C#动态生成按钮及定义按钮事件的方法.分享给大家供大家参考.具体实现方法如下: 1.后台生成input的button按钮复制代码代码如下: HtmlGenericControl control = new HtmlGenericControl("input"); control.Attributes.Add("type", "button"); control.Attributes.Add("onclick"
VUE动态生成word的实现

不废话,直接上代码. 前端代码: <template> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="110"> <FormItem label="项目(全称):" prop="orgName"> <Input v-model=
vue 动态生成拓扑图的示例

横向拓扑在 index.html 文件中引入文件. <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <link href="https://magicbox.bk.tencen
Vue动态生成el-checkbox点击无法赋值的解决方法

前言最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括 checkbox 表单类型,并且使用 Element 组件 UI 时,此时 v-model 绑定的数据也是动态生成的例如: 定义的 data 的 form 里面是空对象,需要动态生成里面的 key export default { data() { return { form: {} } }, } 从后端接口得到 checkList,这个就是动态生成的表单数据 v-for 循环 checkList,得到 key,然后直接 v
JQuery事件委托(适用于给动态生成的脚本元素添加事件)

最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. 但是,好景不长... 研发加了ajax事件后,我的交互效果有部分受了影响! 一个小姑娘,在一群大老爷们研发堆里,对着昏暗的电脑和看不太懂的后台代码,改了半天.最后没解决.我就回来了. 后来就找共同点,发现有个类名控制的交互都不能实现,最后去问研发,你是不是没加上我的类名? 回:加着呢啊!我一看模拟
Vue 动态生成数据字段的实例

目录动态生成数据字段实例 1.父组件定义data里面的数据字段 2.子组件接收数据 3.因为获取数据是异步操作 4.计算属性计算两个变量是否均完成 5.子组件完整代码表单动态生成字段动态生成数据字段实例 1.父组件定义data里面的数据字段异步请求获取数据(一种配置数据,一种实际数据) data () { return { config: [], list: [] }; } 2.子组件接收数据 props: { config: Array, list: A

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

相关推荐

随机推荐