这次给大家带来vue中v-model动态使用详解,vue中v-model动态使用的注意事项有哪些,下面就是实战案例,一起来看一下。
前言:
最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的。那么问题来了,我们要怎样动态生成v-model?
现在项目做完了就整理了一下,直接贴代码了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" >
<title></title>
<script type= "text/javascript" src= "js/vue.js" ></script>
</head>
<body>
<p id= "app" >
<p 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>
</p>
</p>
</body>
<script>
var app = new Vue({
el: "#app" ,
data: {
dataModel: []
},
created: function (){
var len = 4;
for ( var i = 0; i < len; i ++) {
var item = {value1: '' ,value2: '' };
this.dataModel.push(item);
}
},
methods: {
submitClick: function (event){
var tag = event.target;
var index = tag.getAttribute( 'data-index' );
alert(this.dataModel[index].value1);
}
}
})
</script>
</html>
|
登录后复制
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
SpringJDBC怎样批量操作数据
使Cluster共享内存有哪些方法
以上是vue中v-model动态使用详解的详细内容。更多信息请关注PHP中文网其他相关文章!