set用法-给目标对象增加一个响应式数据
https://cn.vuejs.org/v2/api/#Vue-set
用法:
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi'
)
注意
对象不能是 Vue 实例,或者 Vue 实例的根数据对象。
Vue.set( target, propertyName/index, value )
- 参数:
{Object | Array} target
{string | number} propertyName/index
{any} value
- 返回值:设置的值。
示例
set用法.html
中
<body>
<!-- View -->
<div id="app">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
<div>
<input type="text" v-model="name">
</div>
<span v-text="name"></span>
<input type="text" v-model="age">
<hr> {{ dog.name }}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// ViewModel
const vm = new Vue({
el: '#app',
// Model
data: {
name: 'zs',
age: 18,
dog: {}
}
})
// vm.test = 'abc'
// vm.dog.name = 'byd'
// 不允许使用set方法给vue实例增加新的成员
// set方法内部调用了defineProperty把新增的name属性设置为getter/setter
Vue.set(vm.dog, 'name', '新增xxxx')
</script>
</body>