

vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,
有时候并不会自动更新到视图上去;
Vue文档有这么一句话:如果在实例创建之后添加新的属性到实例上,
它不会触发视图更新.,代码示例如下:
?
<template>
<div class="pluginAlertName">
<ul>
<li>{{obj.name}}</li>
<li>{{obj.age}}</li>
<li>{{obj.sex}}</li>
<li>{{obj.info.content}}</li>
</ul>
<button @click="click">click</button>
</div>
</template>
<script>
export default {
created(){
},
mounted(){
console.log( this.$set);
this.$set(this.obj,'sex', 'content, who is my girlfriend?');
//如果后续更改这个值,比如在button上点击事件视图是不会更新的
console.log(this.obj);
},
data(){
return{
obj:{name: "SMlZ",age: '3', info: {content: 'my name is smlz'}}
}
},
methods:{
click(){
this.$set(this.obj,'sex', '女')//this.$set(this.obj,'sex', '女女');
//如果后续更改这个值,比如在button上点击事件视图是不会更新的
console.log(this.obj);
},
}
}
</script>
<style>
</style>

?
?
|