vue中v-model动态生成

来源：互联网发布：人工智能开放创新平台编辑：程序博客网时间：2024/06/11 14:49

最近在做公司的项目中，有这么一个需求，每一行有一个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>

效果图：

1 1