vue中 如何给一个对象添加其没有的键值对 代码实现
时间: 2024-03-05 13:47:34 浏览: 18
可以使用Vue.set()或者this.$set()方法来给一个对象添加它原本没有的键值对。
示例代码如下:
```
// 在Vue组件中使用Vue.set()
<template>
<div>
<p>{{ user.name }}</p>
<p>{{ user.age }}</p>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: '张三'
}
}
},
mounted() {
// 给user对象添加age属性
Vue.set(this.user, 'age', 18)
}
}
</script>
// 在Vue实例中使用this.$set()
<script>
export default {
mounted() {
// 定义一个空对象
const obj = {}
// 使用this.$set()方法给obj对象添加键值对
this.$set(obj, 'name', '张三')
this.$set(obj, 'age', 18)
console.log(obj) // { name: '张三', age: 18 }
}
}
</script>
```
需要注意的是,使用Vue.set()或者this.$set()方法添加的属性是响应式的,可以在模板中动态显示。而直接使用赋值语句添加的属性则不是响应式的。