Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung des Vue.js-Implementierungscodes zum Einfügen wiederholter Daten in Arrays

Detaillierte Erläuterung des Vue.js-Implementierungscodes zum Einfügen wiederholter Daten in Arrays

小云云
小云云Original
2017-12-19 17:06:111352Durchsuche

In diesem Artikel wird hauptsächlich der Implementierungscode von Vue.js vorgestellt, der wiederholte Daten in ein Array einfügt. Freunde, die ihn benötigen, können darauf verweisen.

1. Standardmäßig unterstützt Vue.js das Hinzufügen wiederholter Daten zu einem Array nicht. Dies kann mit track-by="$index" erreicht werden.

2. Verwenden Sie track-by="$index" nicht zum Einfügen von Arrays.

2.1 JavaScript-Code


<script type="text/javascript" src="../js/vue-1.0.21.js"></script> 
  <script type="text/javascript"> 
   window.onload = function() { 
    vm = new Vue({ 
     el: &#39;#app&#39;, 
     data: { 
      arrMsg: [&#39;apple&#39;, &#39;orage&#39;, &#39;pear&#39;] 
     }, 
     methods: { 
      add: function() { 
       this.arrMsg.push(&#39;tamota&#39;); 
      } 
     } 
    }); 
   } 
  </script>

2.2 HTML-Code


<p id="app"> 
   <!--显示数据--> 
   <ul> 
    <li v-for="value in arrMsg" > 
     {{value}} 
    </li> 
   </ul> 
   <button type="button" @click="add">增加数据</button> 
  </p>

2.2 Ergebnis


3. Verwenden Sie die Array-Einfügung von track-by="$index", das Array unterstützt das Einfügen wiederholter Daten

3.1 Javascript-Code


<script type="text/javascript" src="../js/vue-1.0.21.js"></script> 
  <script type="text/javascript"> 
   window.onload = function() { 
    vm = new Vue({ 
     el: &#39;#app&#39;, 
     data: { 
      arrMsg: [&#39;apple&#39;, &#39;orage&#39;, &#39;pear&#39;] 
     }, 
     methods: { 
      add: function() { 
       this.arrMsg.push(&#39;tamota&#39;); 
      } 
     } 
    }); 
   } 
  </script>

3.2 HTML-Code


<p id="app" class="container"> 
   <!--显示数据--> 
   <ul> 
    <li v-for="value in arrMsg" track-by="$index" > 
     {{value}} 
    </li> 
   </ul> 
   <button type="button" @click="add" >增加数据</button> 
  </p>

3.3 Ergebnisse

4. Vollständiger Code


 
 
  
   
   
   
   
  <script type="text/javascript" src="../js/vue-1.0.21.js"></script> 
  <script type="text/javascript"> 
   window.onload = function() { 
    vm = new Vue({ 
     el: &#39;#app&#39;, 
     data: { 
      arrMsg: [&#39;apple&#39;, &#39;orage&#39;, &#39;pear&#39;] 
     }, 
     methods: { 
      add: function() { 
       this.arrMsg.push(&#39;tamota&#39;); 
      } 
     } 
    }); 
   } 
  </script> 
  
  
  <p id="app" class="container"> 
   <!--显示数据--> 
   <ul> 
    <li v-for="value in arrMsg" track-by="$index" > 
     {{value}} 
    </li> 
   </ul> 
   <button type="button" @click="add" >增加数据</button> 
  </p> 
  

ps: Werfen wir einen Blick auf die Vue-Array-Duplikation und den Schleifenfehler

Vue. js unterstützt standardmäßig nicht das Hinzufügen doppelter Daten zum Array. Dies kann mit track-by="$index" erreicht werden.

Verwandte Empfehlungen:

Das ausführlichste vue.js-Installations-Tutorial

Vue.js entwickelt global MessageBox-Komponenten

Detailliertes Erlernen der allgemeinen Anweisungen von Vue.js

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Vue.js-Implementierungscodes zum Einfügen wiederholter Daten in Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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