vue中动态循环model
Posted 未知小未来
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中动态循环model相关的知识，希望对你有一定的参考价值。
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的主要内容，如果未能解决你的问题，请参考以下文章