vue.js操作數組資料的方法

這次帶給大家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: '#app', 
     data: { 
      arrMsg: ['apple', 'orage', 'pear'] 
     }, 
     methods: { 
      add: function() { 
       this.arrMsg.push('tamota'); 
      } 
     } 
    }); 
   } 
  </script>

      2.2  html代碼

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

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

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

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

4、完整程式碼 

 
 
  
   
   
   
   
  <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> 
  
  
  <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"###來實現。 ######相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########################

以上是vue.js操作數組資料的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！