首頁 > web前端 > js教程 > 主體

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

小云云
發布: 2018-01-18 11:43:03
原創
2557 人瀏覽過

本文主要介紹了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  結果    

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

      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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!