vue中v-model动态生成的实例详解

2019-11-19 15:03:05

字体：大中小

来源：转载

供稿：网友

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>

效果图：