2、监测数组

下面是监测数组示例：

<template>
  <div id="root">
    <ul>
      <li v-for="item in list" :key="item.id">
        姓名：{{ item.name }}-年龄：{{ item.age }}
      </li>
    </ul>
    <button style="margin-right: 20px;" @click="addItem">新增人员</button>
    <button @click="updItem">替换人员</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三',age:18 },
        { id: 2, name: '李四',age:19 }
      ]
    };
  },
  methods: {
    addItem() {
      this.list.push({ id: this.list.length + 1, name: '王五',age:20 });
    },
    updItem() {
      this.list.splice(0,1,{ id: this.list.length + 1, name: '赵六',age:22 });
    }
  }
};
</script>
<style scoped>
 #root {
   margin-left: 20px;
   margin-top: 10px;
 }
</style>

结果展示：

总结：

• 当点击 "新增人员" 或 "替换人员" 按钮时，addItem 方法会向 list 数组末尾添加一个新的人员对象，而 updItem 方法则会从 list 数组的第一个元素开始，删除一个元素，然后在该位置插入一个新的人员对象。由于 Vue 重写了数组的变异方法，所以当调用 push() 方法或 splice() 方法，相关的视图会自动更新。