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

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>

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

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>

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> 
  

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!