vue.js method of operating array data-JS Tutorial-php.cn

vue.js method of operating array data

php中世界最好的语言

Release： 2018-04-14 15:27:03

Original

3249 people have browsed it

This time I will bring you the method of operating array data in vue.js. What are the precautions for operating array data in vue.js? Here are the actual cases, let’s take a look.

1. By default, Vue.js does not support adding repeated data to an array. This can be achieved using track-by="$index".

2. Do not use track-by="$index" for array insertion. The array does not support the insertion of duplicate data

2.1

JavaScriptcode

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

Copy after login

2.2 html code

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

Copy after login

3. Use track-by="$index" to insert into the array. The array supports the insertion of repeated data

3.1 Javascript Code 3.2 html code

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

Copy after login

4. Complete code

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

Copy after login

ps: Let’s take a look at the vue array duplication,

LoopError reporting Vue.js does not support adding repeated data to arrays by default. This can be achieved using track-by="$index"

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!