<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../js/vue@2.7.16.js"></script>
    <title>Vue监测数据的原理_数组</title>
  </head>

  <body>
    <div id="app">
      <h1>列表过滤</h1>
      <button @click="changeList">修改</button>

      <ul>
        <li v-for="(item,index) in list" :key="index">
          {{item.name}}---{{item.age}}---{{item.sex}}
        </li>
      </ul>
    </div>
  </body>

  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        list: [
          { id: "001", name: "Bunny-001", age: 19, sex: "男" },
          { id: "002", name: "Bunny-002", age: 16, sex: "男" },
          { id: "003", name: "Bunny-003", age: 20, sex: "女" },
          { id: "004", name: "Bunny-004", age: 18, sex: "男" },
          { id: "005", name: "Bunny-005", age: 19, sex: "女" },
        ],
      },
      methods: {
        changeList() {
          // 无法修改数组，显示不出来修改
          // this.list[0] = { id: "002", name: "Bunny-002", age: 16, sex: "男" };

          // 可以这样修改
          // 详细参考 https://v2.cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95
          //   this.list.splice(0, 1, {
          //     id: "0021",
          //     name: "Bunny-0021",
          //     age: 16,
          //     sex: "男",
          //   });

          // 或者这样修改
          // Vue.$set(this.list, 0, {
          this.$set(this.list, 0, {
            id: "0021",
            name: "Bunny-0021",
            age: 16,
            sex: "男",
          });
        },
      },
    });
  </script>
</html>
