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>  

变异方法

push() 接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度

pop() 从数组末尾移除最后一项，减少数组的length值，然后返回移除的项

shift() 移除数组中的第一个项并返回该项，同时数组的长度减1

unshift() 在数组前端添加任意个项并返回新数组长度

splice() 删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员

sort() 调用每个数组项的toString()方法，然后比较得到的字符串排序，返回经过排序之后的数组

reverse() 用于反转数组的顺序，返回经过排序之后的数组