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 限制输入脚本大全
Nov 03 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
深入Node TCP模块的理解
Mar 13 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
那些年一起学习的PHP(三)
2012/03/22 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
浅析vue数据绑定
2017/01/17 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
Python多线程下载文件的方法
2015/07/10 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python Celery定时任务的示例
2018/03/13 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
Python 求向量的余弦值操作
2021/03/04 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
美国钻石商店:Zales
2016/11/20 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
2014财产信托协议书范本
2014/11/18 职场文书
计生个人工作总结
2015/02/28 职场文书
十八大观后感
2015/06/12 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript