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
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #e4af09 }
时间： 2024-10-08 01:07:44