作用: 在Vue中的data中添加一个响应式数据

HTML

<div id="el">
    <h1>学校信息</h1>
    <h2>名称: {{school.name}}</h2>
    <h2>地址: {{school.address}}</h2>
    <h2 v-if="school.leader">校长: {{school.leader}}</h2>
    <hr>
    <h1>学生信息</h1>
    <button @click="addSex">为学生添加一个年龄,默认为男</button>
    <h2>名称: {{student.name}}</h2>
    <h2>年龄: {{student.age}}</h2>
    <h2 v-if="student.sex">性别: {{student.sex}}</h2>
</div>

js

const vm=new Vue({
      el:"#el",
      data:{
          school:{
              name:"南方IT学员",
              address:"广东"
          },
          student:{
              name:"唐浩富",
              age:20,
          }
      },
      methods:{
          addSex(){
              //在Vue中的data中添加一个响应式数据
              //正确写法
              //第一种写法
              // Vue.set(this.student,'sex','男');
              //第二种写法
              this.$set(this.student,'sex','男');

              //错误写法,set Api不能给Vue实例或者Vue.data直接设置值
              // this.$set(this,'hobby','篮球');
              // Vue.set(this,'hobby','篮球');
          }
      }
  });
  //正确写法
  Vue.set(vm.school,'leader','呓语');
  // vm.$set(vm.school,'leader','呓语')

注意点: Vue.set Api不能给Vue实例或者Vue.data中直接添加属性