vue this.$set

解决动态增加属性 界面更新

<template>
  <div>
   <h3>{{a}}</h3>
    <h3>{{pdata}}</h3>
    <button @click="f1">按钮</button>
 
  </div>
</template>

<script>
  var vdata = {
    name: '简书',
    age: '3',
    info: {
      content: 'my name is test'
    }
  };

  export default {
    data () {
      return {
        a: '1',
        pdata: vdata,
      };
    },
    methods: {
      f1 () {
        // this.$set(Array, index, newValue)
        // this.$set(Object, key, value)
        this.$set(this.pdata, 'sex', '男');
      },
    }
  };

</script>