展示人员信息，动态添加一个属性，发现页面数据并没有展示
<body>
<!-- 准备好一个容器 -->
<div id="app">
<h2>人员信息</h2>
<button @click="add">添加信息</button>
<div>
姓名：{{persons.name }}
</div>
<div>
年龄：{{persons.age }}
</div>
<div>
性别：{{persons.sex }}
</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
keyWord: '',
persons: {
id: 1,
name: '张三冬',
age: 18,
}
},
methods: {
add() {
this.persons.sex = '男'
}
},
})
</script>
</body>
页面展示
通过 Vue.set 或者 this.$set 添加则可以正常展示。
# Vue.set
向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新
注意
使用 Vue.set 向响应式对象添加，注意对象不能是 Vue 实例，或者 Vue 实例根数据对象.
比如：this.$set (this,'leader',' 校长 ')
如果添加则会报以下错误
