vue响应式修改数组

新增数据

1. 在数组尾部添加元素push()

 this.list.push('xxx','yyy');

2. 在数组头部添加元素unshift

this.list.unshift('111','222');

删除数据

1.删除最后一个元素 pop()

 this.list.pop();

2.删除第一个元素 shift()

this.list.shift();

增删改splice()

     /*splice(start,length,item)
      * start 起始位置
      * length 操作数据的长度个数
      * item 一个或多个元素
      * */
      spliceAdd(){
        // 在下标为2的位置增加元素['aaa','bbb']
        this.list.splice(2, 0, 'aaa','bbb')
      },
      spliceDel(){
        // 从下标为1的位置开始删除2个元素
        this.list.splice(1, 2)
      },
      spliceRep(){
        // 从下标为0的位置开始替换2个元素为['DDD',"EEE",'FFF']
        this.list.splice(0, 2,'DDD',"EEE",'FFF')
      },

排序 sort()

 this.list.sort()

颠倒 reverse()

 this.list.reverse()

Vue修改 Vue.set

 //  Vue.set(要修改的对象，索引值，修改后的值)
 Vue.set(this.list, 0, 'Vue')

非响应方法

 this.list[0] = "数据可修改，但vue不响应";

方法汇总

<script>
  const app = new Vue({
    el:"#app",
    data:{
      list:['a','b','c','d']
    },
    methods:{
      // 新增数据项
      push(){
        this.list.push('xxx','yyy')
      },
      pop(){
        this.list.pop()
      },
      shift(){
        this.list.shift()
      },
      unshift(){
        this.list.unshift('111','222')
      },
     /*splice(start,length,item)
      * start 起始位置
      * length 操作数据的长度个数
      * item 一个或多个元素
      * */
      spliceAdd(){
        this.list.splice(2, 0, 'aaa','bbb')
      },
      spliceDel(){
        this.list.splice(1, 2)
      },
      spliceRep(){
        this.list.splice(0, 2,'DDD',"EEE",'FFF')
      },
      sort(){
        this.list.sort()
      },
      reverse(){
        this.list.reverse()
      },
      //  Vue.set(要修改的对象，索引值，修改后的值)
      set(){
        Vue.set(this.list, 0, 'Vue')
      },

      // 非响应式
      modify(){
        this.list[0] = "数据可修改，但vue不响应";
        console.log(app.list)
      },
    }
  })
</script>