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 相关文章推荐
Js callBack 返回前一页的js方法
Nov 30 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
悬浮数字的实现案例
Feb 19 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
详解Vue的options
May 15 Vue.js
微信小程序 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP代码覆盖率统计详解
2020/07/22 PHP
密码框显示提示文字jquery示例
2013/08/29 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
vue如何实现动态加载脚本
2020/02/05 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
初步理解Python进程的信号通讯
2015/04/09 Python
python动态网页批量爬取
2016/02/14 Python
Python读写docx文件的方法
2018/05/08 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
工作会议主持词
2014/03/17 职场文书
总结表彰大会主持词
2014/03/26 职场文书
工作评语大全
2014/04/26 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
浅析python中特殊文件和特殊函数
2022/02/24 Python