Vue.js在陣列中插入重複資料詳解

本文主要介紹了Vue.js在陣列中插入重複資料的實作程式碼,需要的朋友可以參考下，希望能幫助到大家。

1、在預設的情況下，Vue.js預設不支援在陣列中加入重複的資料。可以使用track-by="$index"來實現。

2、不使用track-by="$index"的陣列插入，陣列不支援重複資料的插入

      2.1  JavaScript程式碼

<script></script> 
  <script> 
   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.2.2.2.2.2.2. #

<p> 
   <!--显示数据--> 
   </p>

      
•        {{value}}      
     

     增加数据          2.2  結果    

 

      3.1 Javascript代碼           

<script></script> 
  <script> 
   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 html代碼

<p> 
   <!--显示数据--> 
   </p>

      
•        {{value}}      
     

     增加数据      

nbsp;html> 
 
  
   
   
   
   
  <script></script> 
  <script> 
   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> 
   <!--显示数据--> 
   </p>

      
•        {{value}}      
     

     增加数据        
ps：下面看下vue 陣列重複，迴圈報錯

Vue.js預設不支援在陣列中加入重複的資料。可以使用track-by="$index"來實現。

相關推薦：

Mysql刪除重複資料保留最小的id

mysql查詢表裡的重複資料方法

php陣列重複資料的處理

#

以上是Vue.js在陣列中插入重複資料詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！