快捷導(dǎo)航

Vue.js在數(shù)組中插入重復(fù)數(shù)據(jù)的實(shí)現(xiàn)代碼

更新時間：2017年11月17日 14:47:12 作者：Bwz_Learning

這篇文章主要介紹了Vue.js在數(shù)組中插入重復(fù)數(shù)據(jù)的實(shí)現(xiàn)代碼,需要的朋友可以參考下

1、在默認(rèn)的情況下，Vue.js默認(rèn)不支持往數(shù)組中加入重復(fù)的數(shù)據(jù)?？梢允褂?code>track-by="$index"來實(shí)現(xiàn)。

2、不使用track-by="$index"的數(shù)組插入，數(shù)組不支持重復(fù)數(shù)據(jù)的插入

2.1 JavaScript代碼

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

<div id="app"> 
   <!--顯示數(shù)據(jù)--> 
   <ul> 
    <li v-for="value in arrMsg" > 
     {{value}} 
    </li> 
   </ul> 
   <button type="button" @click="add">增加數(shù)據(jù)</button> 
  </div>

2.2 結(jié)果

3、使用track-by="$index"的數(shù)組插入，數(shù)組支持重復(fù)數(shù)據(jù)的插入

3.1 Javascript代碼

<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.2 html代碼

<div id="app" class="container"> 
   <!--顯示數(shù)據(jù)--> 
   <ul> 
    <li v-for="value in arrMsg" track-by="$index" > 
     {{value}} 
    </li> 
   </ul> 
   <button type="button" @click="add" >增加數(shù)據(jù)</button> 
  </div>

3.3 結(jié)果

4、完整代碼

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" /> 
  <style type="text/css"> 
   .container{ 
    margin-top: 20px; 
   } 
  </style> 
  <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> 
 </head> 
 <body> 
  <div id="app" class="container"> 
   <!--顯示數(shù)據(jù)--> 
   <ul> 
    <li v-for="value in arrMsg" track-by="$index" > 
     {{value}} 
    </li> 
   </ul> 
   <button type="button" @click="add" >增加數(shù)據(jù)</button> 
  </div> 
 </body> 
</html>

ps：下面看下vue 數(shù)組重復(fù)，循環(huán)報錯

Vue.js默認(rèn)不支持往數(shù)組中加入重復(fù)的數(shù)據(jù)?？梢允褂?code>track-by="$index"來實(shí)現(xiàn)。

總結(jié)

以上所述是小編給大家介紹的Vue.js在數(shù)組中插入重復(fù)數(shù)據(jù)的實(shí)現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: