Detaillierte Erläuterung der dynamischen Verwendung des V-Modells in Vue-js-Tutorial-php.cn

Detaillierte Erläuterung der dynamischen Verwendung des V-Modells in Vue

php中世界最好的语言

Freigeben： 2018-04-16 13:38:55

Original

3302 Leute haben es durchsucht

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der dynamischen Verwendung des V-Modells in Vue geben. Was sind die Vorsichtsmaßnahmen für die dynamische Verwendung des V-Modells in Vue? Das Folgende ist ein praktischer Fall.

Vorwort:

Neuerdings gibt es in einem Unternehmensprojekt eine solche Anforderung. Jede Zeile verfügt über eine Eingabe und eine Auswahl, und die Anzahl der Zeilen ändert sich dynamisch basierend auf den vom Server zurückgegebenen json-Daten. Die Frage ist also: Wie generieren wir dynamisch ein V-Modell?

Nachdem das Projekt nun abgeschlossen ist, habe ich es geklärt und den Code direkt gepostet.

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Wie SpringJDBC Daten in Stapeln verarbeitet

Welche Methoden gibt es, damit Cluster den Speicher gemeinsam nutzen?

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der dynamischen Verwendung des V-Modells in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!