vue动态循环model与angular有所不同，angular直接定义一个数组，然后传入循环列表的index即可。

而vue不仅需要定义一个数组，还需要通过接口读出循环的数组长度，然后在create中先创建出来。

<!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="(index,item) 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 src="https://h5.u51.com/99fenqi/vue/common/vue.min.js"></script>

    <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>

参考文章：http://blog.csdn.net/zhuming3834/article/details/70170305

vue中动态循环model的更多相关文章

  1. Vue 中动态添加class（使用v-bind:class）

    今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...

  2. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  3. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  4. Vue中的循环以及修改差值表达式

    0828自我总结 一.Vue中的循环 v-for 常见的4总情况 #第一种 <div v-for="item in items"></div> #第二种 & ...

  5. vue中动态加载img

    想实现动态加载图片,当点击“首页”时,图片变色 代码如下: <mt-tabbar v-model="selected" fixed class="border-1p ...

  6. vue中动态引入图片为什么要是require， 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  7. vue中动态加载组件+开发者模式+JS参数值传递和引用传递

    今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...

  8. vue中动态样式不起作用？ scoped了解一下

    vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped

  9. Vue中动态添加多个class

    vue中可以通过 :class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,这个时候其实也很简单 先看一下示例: ...

随机推荐

  1. VS2013未能正确加载的问题【转载】

    今天使用电脑,关机重启时,WINDOWS提示“正在配置中,请勿关机” 的提醒,等重启后,打开VS2013就提示了未加载成功的问题,如下图: 我的解决方法是:找到VS2013开发人员命令提示:在窗口中输 ...

  2. php-5.6.26源代码 - 扩展模块的种类，扩展模块的执行埋点

    模块种类(两种) 类型一:zend的模块:(类似zend_extension=test.so) 识别方法: php.ini中以zend_extension开头的配置,如zend_extension=t ...

  3. php - 从数据库导出百万级数据(CSV文件)

    将数据库连接信息.查询条件.标题信息替换为真实数据即可使用. <?php set_time_limit(0); ini_set('memory_limit', '128M'); $fileNam ...

  4. SpringCloud框架搭建+实际例子+讲解+系列五

    (4)服务消费者,面向前端或者用户的服务 本模块涉及到很多知识点:比如Swagger的应用,SpringCloud断路器的使用,服务API的检查.token的校验,feign消费者的使用.大致代码框架 ...

  5. 小明的存钱计划 南阳acm54

    小明的存钱计划 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 小明的零花钱一直都是自己管理.每个月的月初妈妈给小明300元钱,小明会预算这个月的花销,并且总能做到实际花 ...

  6. C语言进阶——注释符号12

    注释可能大认为非常简单,但是注释其实在C语言中很关键,来看下面一段对话. ---学生: 老师,我觉得注释没有必要深究,因为很简单,对程序功能也没有影响. ---老师: 注释是C语言最重要的工具,我们先 ...

  7. Aizu：2200-Mr. Rito Post Office

    快递 Time limit 8000 ms Memory limit 131072 kB Problem Description 你是某个岛国(ACM-ICPC Japan)上的一个苦逼程序员,你有一 ...

  8. Clion 不能杀死进程

    描述 自己使用时发现点了结束按钮后,打开任务管理器,发现刚才运行的程序还在,并没有被杀死. 有时如果一个程序写了死循环,就会出现疯狂占用内存,最后不得不关机重启. 解决方案 这是他的社区有人也有这样的 ...

  9. Hive 文件格式 & Hive操作（外部表、内部表、区、桶、视图、索引、join用法、内置操作符与函数、复合类型、用户自定义函数UDF、查询优化和权限控制）

    本博文的主要内容如下: Hive文件存储格式 Hive 操作之表操作:创建外.内部表 Hive操作之表操作:表查询 Hive操作之表操作:数据加载 Hive操作之表操作:插入单表.插入多表 Hive语 ...

  10. 使用Visual Studio 快速把 Json，Xml 字符串创建为一个实体类