Vue列表渲染-变异方法

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

Vue 包含一组观察数组的变异方法，变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组

所以它们也将会触发视图更新。这些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

你打开控制台，然后用前面例子的 items 数组调用变异方法： example1.items.push({ message: 'Baz' }) 。

这些方法是不是很熟悉,这些都是原生js数组的方法,会专门写篇博客回顾这些方法这里就看实例吧

 <div id="example">

   <div>

     <button @click="push()">push</button>

     <button @click="pop()">pop</button>

     <button @click="shift()">shift</button>

     <button @click="unshift()">unshift</button>

     <button @click="splice()">splice</button>

     <button @click="sort()">sort</button>

     <button @click="reverse()">reverse</button>

   </div>

   <ul>

     <li v-for="item in items">

       {{item.message}}

     </li>

   </ul>

 </div>

 <script>

   var example = new Vue({

     el:"#example",

     data:{

       items:[

          {message:5},

          {message:2},

          {message:7}

       ],

       addValue:{message:5},

       addSplice:{message:'Thank'},

     },

      methods:{

         push(){

           this.items.push(this.addValue) //末尾添加

         },

         pop(){

           this.items.pop() // 末尾删除

         },

         shift(){

           this.items.shift()   // 开头删除

         },

         unshift(){

           this.items.unshift(this.addValue) //开头添加

         },

         splice(){

           this.items.splice(1,0,this.addSplice); // 从第二个位置添加一个Thank

         },

         sort(){

           this.items.sort(function(a, b){

              return a.message < b.message;    // 比较大小

           });

         },

         reverse(){

           this.items.reverse()         // 反转数组

         },

       }

   })

 </script>