vue--push,pop,unshift,shift,reverse,splice,sort数组修改产生视图更新

1) 利用索引并未视图更新

 2) 直接删除长度不能更新视图

 push,pop,unshift,shift,reverse,splice,sort 都可以实现视图更新

 

• {{ item.name }}

增加

删除

清空

翻转

export default{

  data(){

    return {

      list:[

        {id:1,name:'张三'},

        {id:2,name:'李四'},

        {id:3,name:'赵武'},

      ]

    }

  },

  methods:{

    add(){

      //this.list[3] = { id:4, name:'王五' }

      //console.log(this.list) //数组发生改变，并未更新视图。

      this.list.push({ id:4, name:'王五' }) //push可以更改视图更新

    },

    del(){

      //this.list.length = 2;

      //console.log(this.list) //数组发生改变，并未更新视图。

      this.list.pop() //删除最后一个，可以更新视图

    },

    rem(){

      //this.list.length = 0;//数组发生改变，并未更新视图。

      this.list.splice(0,this.list.leng)//可以更改视图

    },

    rev(){

      //正序变成倒叙

      let t;

      for(let i = 0; i

        t = this.list[i];

        this.list[i] = this.list[this.list.length-i-1];

        this.list[this.list.length-i-1] = t;

      }

      console.log(this.list)

      this.list.reverse();//实现翻转(更改视图) == 等同上面(只是不更改视图)

    }

  }

}