vue给一个对象的动态属性 绑定
时间: 2023-08-24 16:04:54 浏览: 148
vue给对象动态添加属性和值的实例
可以使用Vue的响应式机制,将对象的动态属性绑定到Vue实例的data中。例如:
HTML:
```html
<div id="app">
<p>{{ obj.dynamicProp }}</p>
</div>
```
JavaScript:
```javascript
var vm = new Vue({
el: '#app',
data: {
obj: {
// 静态属性
staticProp: 'static value'
}
},
mounted() {
// 动态添加属性
this.$set(this.obj, 'dynamicProp', 'dynamic value')
}
})
```
这里通过在Vue实例的`mounted`生命周期中使用`this.$set`方法,动态添加了`obj`对象的`dynamicProp`属性,并将其绑定到了HTML模板中。这样,当`obj.dynamicProp`的值发生变化时,HTML中对应的值也会自动更新。
阅读全文