<div id="app">
<div>
<h3>{{person.name}}</h3>
<button type="button" @click="handleAdd">添加年龄</button>
</div>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
person:{}
},
methods:{
handleAdd(){
this.person.name = 'ljx'
//通过直接添加方法无法添加
}
}
})
</script>
解决办法
const app = new Vue({
el:'#app',
data:{
person:{}
},
methods:{
handleAdd(){
// console.log(Vue.set); \
//Vue.set(object,key,value)
//this.$set(object,key,value)
this.$set(this.person,'name','ljx')
此处注意:可通过实例使用 this.$set(object,key,value)
也可使用调用Vue : Vue.$set(object,key,value)
}
}
})
添加多个属性方法
this.person = Object.assign({},this.person,{
age:55,
height:1.99
})