P8. vue3 数组更新检查

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5],

    };
  },
  methods:{
    changeList:function (){
      //vue2 不可以通过修改索引值更新数组
      this.list[5]=7
      // push();给数组末尾添加元素
      // pop()；
      // shift()
      // unshift()
      // splice()
      // sort()
      // reverse()
    },
  }
};
</script>

<template>
  <div>
    <ul>
      <li v-for="itme in list" :key="itme"> {{itme}}</li>
    </ul>
    <button @click="changeList">change list</button>

  </div>
</template>

<style>

</style>

vue2 不可以通过修改索引值更新数组,vue3可以

方法使用

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5],

    };
  },
  methods:{
    changeList:function (){
      //vue2 不可以通过修改索引值更新数组,vue3可以
      //this.list[5]=7
      // push();给数组末尾添加元素
      //this.list.push(8,9,11)
      // pop()；删除数组末尾元素
      //this.list.pop()
      // shift() 删除数组第一个元素
      //this.list.shift()
      // unshift() 此哦数组数组首位添加元素
      //this.list.unshift(0)
      //this.list.unshift(0,9)
      // splice() 删除，替换，插入元素
      //del,第一个参数表示删除元素索引，第二个表示要删除几个元素
      //this.list.splice(1,2)
      //inster,第二个参数要是0,第三个参数是要插入内容
      //this.list.splice(3,0,7,9,0)
      //替换，也取决于第二个参数
      //this.list.splice(1,3,7,7,7)
      // sort() 排序
      //this.list.sort()
      // reverse() 字符串反转
      this.list.reverse()
    },
  }
};
</script>

<template>
  <div>
    <ul>
      <li v-for="itme in list" :key="itme"> {{itme}}</li>
    </ul>
    <button @click="changeList">change list</button>

  </div>
</template>

<style>

</style>