vue中v-model动态生成的实例详解
程序员文章站
2022-09-08 15:13:28
vue中v-model动态生成的实例详解
前言：
最近在做公司的项目中，有这么一个需求，每一行有一个input和一个select,其中行数是根据服务器返回的json数据...
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>
效果图：
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！