vue.js Methode zum Bearbeiten von Array-Daten

Dieses Mal werde ich Ihnen die Methode zum Betreiben von Array-Daten in vue.js vorstellen. Was sind die Vorsichtsmaßnahmen für den Betrieb von Array-Daten in vue.js?

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. Das Array unterstützt das Einfügen wiederholter Daten nicht ​ 2.1

JavaScript

Code

2.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. Verwenden Sie track-by="$index" zum Einfügen des Arrays. Das Array unterstützt das Einfügen wiederholter Daten

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

                                                      3.2 HTML-Code

4. Vervollständigen Sie den 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>

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

Schleife

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

Fehler

Vue.js unterstützt standardmäßig nicht das Hinzufügen wiederholter Daten zu Arrays. Dies kann mit erreicht werden. 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: track-by="$index"

Das obige ist der detaillierte Inhalt vonvue.js Methode zum Bearbeiten von Array-Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!