Heim > Web-Frontend > js-Tutorial > Detaillierte Erklärung zum Einfügen doppelter Daten in ein Array in Vue.js

Detaillierte Erklärung zum Einfügen doppelter Daten in ein Array in Vue.js

小云云
Freigeben: 2018-01-18 11:43:03
Original
2576 Leute haben es durchsucht

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: '#app', 
     data: { 
      arrMsg: ['apple', 'orage', 'pear'] 
     }, 
     methods: { 
      add: function() { 
       this.arrMsg.push('tamota'); 
      } 
     } 
    }); 
   } 
  </script>
Nach dem Login kopieren
Nach dem Login kopieren

2.2 HTML-Code

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

2.2 Ergebnisse

3. Verwenden Sie track-by="$index" für das Array-Einfügen das Einfügen doppelter Daten.

3.1 Javascript-Code

3.2 HTML-Code

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

3.3 Ergebnisse

<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>
Nach dem Login kopieren


4. Vollständiger Code


ps: Werfen wir einen Blick auf die Duplizierung von Vue-Arrays und Schleifenfehler

 
 
  
   
   
   
   
  <script type="text/javascript" src="../js/vue-1.0.21.js"></script> 
  <script type="text/javascript"> 
   window.onload = function() { 
    vm = new Vue({ 
     el: '#app', 
     data: { 
      arrMsg: ['apple', 'orage', 'pear'] 
     }, 
     methods: { 
      add: function() { 
       this.arrMsg.push('tamota'); 
      } 
     } 
    }); 
   } 
  </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> 
  
Nach dem Login kopieren
Vue.js unterstützt das Hinzufügen nicht Standardmäßig werden wiederholte Daten in Arrays gespeichert. Dies kann mit track-by="$index" erreicht werden.

Verwandte Empfehlungen:


MySQL löscht doppelte Daten und behält die kleinste ID bei

Methode für doppelte Daten in der MySQL-Abfragetabelle

Verarbeitung doppelter Daten im PHP-Array

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung zum Einfügen doppelter Daten in ein Array in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage