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


Posted in Javascript onOctober 27, 2017

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

前言:

最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的。那么问题来了,我们要怎样动态生成v-model?

现在项目做完了就整理了一下,直接贴代码了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/vue.js" ></script>
  </head>
  <body>
    <div id="app">
      <div class="line" v-for="(item,index) in dataModel">
        <input type="text" v-model="dataModel[index].value1" />
        <span>{{dataModel[index].value1}}</span>
        <button v-bind:data-index="index" v-on:click="submitClick">提交</button>

        <input type="text" v-model="dataModel[index].value2" />
        <span>{{dataModel[index].value2}}</span>
      </div>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        // 创建一个空的数组 
        dataModel: []
      },
      created: function(){
        // 这里是动态生成v-model,这个可以放在网络请求成功里面;
        var len = 4;
        for (var i = 0; i < len; i ++) {
          var item = {value1: '',value2: ''};
          this.dataModel.push(item);
        }
      },
      methods: {
        // 显示v-model里面的数据
        submitClick: function(event){
          var tag = event.target;
          var index = tag.getAttribute('data-index');
          alert(this.dataModel[index].value1);
        }
      }
    })
  </script>
</html>

效果图:

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

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
javascript执行环境及作用域详解
May 05 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 #Javascript
js通过Date对象实现倒计时动画效果
Oct 27 #Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 #Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 #Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 #Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 #Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 #Javascript
You might like
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
详解Vue单元测试case写法
2018/05/24 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
python函数装饰器用法实例详解
2015/06/04 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python 三元运算符使用解析
2019/09/16 Python
Python模块的制作方法实例分析
2019/12/21 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
表达自我的市场:Society6
2018/08/01 全球购物
临床护士自荐信
2014/01/31 职场文书
安全例会汇报材料
2014/08/23 职场文书
以权谋私检举信范文
2015/03/02 职场文书
情感电台广播稿
2015/08/18 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server