vue中v-model動態使用詳解

這次帶給大家vue中v-model動態使用詳解，vue中v-model動態使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言：

# 最近在做公司的專案中，有這麼一個需求，每一行有一個input和一個select,其中行數是根據伺服器返回的json資料動態變化的。那麼問題來了，我們要怎麼動態產生v-model？

現在專案做完了就整理了一下，直接貼程式碼了。

nbsp;html>

  
    <meta>
    <title></title>
    <script></script>
  
  
    <p>
      </p><p>
        <input>
        <span>{{dataModel[index].value1}}</span>
        <button>提交</button>
        <input>
        <span>{{dataModel[index].value2}}</span>
      </p>
    
  
  <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: &#39;&#39;,value2: &#39;&#39;};
          this.dataModel.push(item);
        }
      },
      methods: {
        // 显示v-model里面的数据
        submitClick: function(event){
          var tag = event.target;
          var index = tag.getAttribute(&#39;data-index&#39;);
          alert(this.dataModel[index].value1);
        }
      }
    })
  </script>

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

SpringJDBC怎樣批次操作資料

#讓Cluster共享記憶體有哪些方法

以上是vue中v-model動態使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！