vue中具有响应的数组

1.在vue中可以改变原数组的方法只有7个数组的方法是响应式的 ，其他都不是响应式的

push pop unshift shift sort reverse splice

2.如果直接通过索引号修改数组成员，界面是不会更新的

解决方法：$set()方法

 

<template>
  <div>
    
  
      <ul>
        <li v-for="item in arr" :key="item">{{ item }}</li>
      </ul>
      <button @click="changeArr">修改数组元素</button>
      <button @click="sliceArr">截取数组的前三项</button>
 
  </div>
</template>
<script>
/* 
 v-for循环
 作用：用于遍历  数组、对象、数字
*/
export default {
  data() {
    return {
     
      arr: [4, 5, 6, 78, 9, 1],
    };
  },
  methods: {
    changeArr() {
      // 往数组的最后一项添加一项
      this.arr.push(this.arr[0]);
      //  往处最前面的一项
      this.arr.shift();
    },
    sliceArr() {
      /* 
      1.在vue中可以改变原数组的方法只有7个数组的方法是响应式的 ，其他都不是响应式的
      push pop unshift shift sort reverse splice
      2.如果直接通过索引号修改数组成员，界面是不会更新的
         解决方法：$set()方法
      */
      //slice返回一个新数组 不会修改原数组
      this.$set(this.arr, 2, 170); //$set(要修改的原数组, 修改的下标位置, 修改成)
    },
  },
};
</script>