Explication détaillée du code d'implémentation de Vue.js pour l'insertion de données répétées dans des tableaux

Cet article présente principalement le code d'implémentation de Vue.js insérant des données répétées dans un tableau. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. Par défaut, Vue.js ne prend pas en charge l'ajout de données répétées à un tableau. Ceci peut être réalisé en utilisant track-by="$index".

2. N'utilisez pas track-by="$index" pour l'insertion de tableaux. Les tableaux ne prennent pas en charge l'insertion de données répétées

2.1 Code JavaScript

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

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

2.2 Résultat

3. Utilisez l'insertion dans le tableau de track-by="$index", le tableau prend en charge l'insertion de données répétées

3.1 Code Javascript

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

<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 Résultats

4. >

 
 
  
   
   
   
   
  <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 : Jetons un coup d'œil à la duplication du tableau vue et à l'erreur de boucleVue. js ne prend pas en charge l'ajout de données en double au tableau par défaut. Ceci peut être réalisé en utilisant

.

track-by="$index"Recommandations associées :

Le didacticiel d'installation de vue.js le plus détaillé

Vue.js développe un composant appelé globalement MessageBox

Apprentissage détaillé des instructions communes de Vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!