詳解Vue.js在陣列中插入重複資料的實作程式碼

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

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

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

      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: &#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  html程式碼

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

      2.2  結果    

##1rack

1/F

1) 使用使用使用使用使用使用使用使用使用標準#1 "$index"的陣列插入，數組支援重複資料的插入

      3.1 Javascript代碼           

r

#

<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.3 結果     

4、完整程式碼 

##4、完整程式碼 

#

<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：下面看下vue 陣列重複，迴圈報錯

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

來實現。

相關推薦：

######最詳細的vue.js安裝教學############Vue.js開發一個全域呼叫的MessageBox元件############Vue.js常用指令的學習詳解#######

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