Home >Web Front-end >JS Tutorial >Detailed explanation of dynamic use of v-model in vue

Detailed explanation of dynamic use of v-model in vue

php中世界最好的语言Original: 2018-04-16 13:38:553366browse

This time I will bring you a detailed explanation of the dynamic use of v-model in vue. What are the precautions for the dynamic use of v-model in vue. The following is a practical case. Let’s take a look. take a look.

Foreword:

Recently, in a company project, there is such a requirement. Each row has an input and a select, and the number of rows changes dynamically based on the json data returned by the server. So the question is, how do we dynamically generate v-model?

Now that the project is finished, I have sorted it out and posted the code directly.

<!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(){
        // 这里是动态生成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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Detailed explanation of dynamic use of v-model in vue

Related articles