<template>
<div class="wrap open">
<a>{{test01.name}}</a>
<a>{{test00}}</a>
</div>
</template>
<script>
export default {
data(){
return {
test01:{
sex:"boy"
}
}
}
ready(){
//this.test00=2222不起作用
this.$set("test00",2222)//test00:2222 ok //this.test01.name=1222;不起作用,因为test的name为新添加的属性,不能响应
this.$set('test01.name',1222);//test01:{sex:"boy",name:1222} ok }
}
</script>
如果直接使用this.test.name=1222不会起作用,因为受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data
对象上才能让 Vue.js 转换它,才能让它是响应的。
不过,有办法在实例创建之后添加属性并且让它是响应的。
对于 Vue 实例,可以使用 $set(key, value)
实例方法。
key也支持"test01.name"这种写法,之前一直没注意到。