20.vueSet使用.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    {{message}}
    <div class="obj" v-for="(item, index) in obj" :key="index">
      <span>{{item.name}}</span><span>{{item.age}}</span>{{item.type}}
    </div>
    <button @click="getData">改变</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        obj: []
      },
      mounted() {
        this.obj = [
          {
            id: 1,
            name: '小米',
            sex: '女',
            age: 18
          }, {
            id: 2,
            name: '华为',
            sex: '男',
            age: 10
          }, {
            id: 3,
            name: '腾讯',
            sex: '女',
            age: 28
          },
        ]
      },
      methods: {
        getData() {
          console.log('改变');
          this.obj.forEach((item, index) => {
            if (item.age > 20) {
              // 虽然改变数据，但是无法改变视图
              // item.type = '大龄剩女'
              this.$set(this.obj[index], 'type', '大龄剩女')
            } else {
              // item.type = '再等等'
              this.$set(this.obj[index], 'type', '再等等')
            }
            console.log(this.obj[index]);
            // this.$set(this.obj[index], type, 'item.type')
          });
          console.log(this.obj);
        }
      }
    })
  </script>
</body>

</html>