Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der dynamischen Verwendung des V-Modells in Vue

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

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

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>

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!

php json select input

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie SpringJDBC Daten stapelweise verarbeitetNächster Artikel：Wie SpringJDBC Daten stapelweise verarbeitet

In Verbindung stehende Artikel

Mehr sehen