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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
生成二维码方法汇总
Dec 26 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
vue.js开发环境搭建教程
May 04 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python树莓派红外反射传感器
2019/01/21 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
python 模块导入问题汇总
2021/02/01 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
蒂娜商店:Tiina the Store
2019/12/07 全球购物
Java中实现多态的机制
2015/08/09 面试题
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
2015年宣传思想工作总结
2015/05/22 职场文书
活动新闻稿范文
2015/07/17 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript