vue 如何使用$set赋值
时间: 2023-07-19 15:35:24 浏览: 51
在Vue中,如果要动态地添加或修改一个对象的属性,可以使用Vue实例的$set方法。$set方法接收三个参数:对象、属性名和属性值。例如:
```javascript
// 在Vue实例中添加一个名为obj的对象
this.obj = {}
// 通过$set方法动态添加一个属性
this.$set(this.obj, 'name', 'Tom')
```
如果不使用$set方法,直接给对象添加属性,则新添加的属性不会被Vue检测到,也不会触发视图的更新。因此,使用$set方法能够确保添加的属性能够被Vue监测到,从而更新视图。
相关问题
vue 用 $set重新赋值
使用$set方法重新赋值的话,其实是没有必要的。$set方法主要是用来向Vue响应式对象(例如:data中的对象或者数组)中添加新属性或者修改已有属性的值,这样才能保证这些属性的变化能够被Vue所检测到,并且触发视图的更新。
如果你想要修改一个响应式对象的属性值,直接给属性赋新的值即可,不需要使用$set方法。例如:
```
this.myObject.myProperty = newValue;
```
这样做能够直接修改myObject对象中myProperty属性的值,并且Vue会检测到这个变化并且触发视图的更新。如果你使用$set方法来修改这个属性的值,例如:
```
Vue.set(this.myObject, 'myProperty', newValue);
```
这样做虽然也能达到修改属性值的目的,但是会导致Vue多做一些无用的操作,因为Vue会检测到myObject这个对象的变化,即使myObject对象中的其他属性值没有发生变化。所以,如果你只是想修改响应式对象中的属性值,直接给属性赋新的值就可以了,不需要使用$set方法。
VUE2使用this.$set赋值
在Vue2中,通过`this.$set`方法可以在响应式对象中添加新属性或者更新已有属性的值,以确保Vue能够观察到这些变化。
使用`this.$set`的语法如下:
```javascript
this.$set(object, key, value)
```
其中,`object`是要进行操作的对象,`key`是新属性的键名,`value`是新属性的值。
以下是一个示例:
```javascript
<template>
<div>
<p>{{ message }}</p>
<button @click="changeMessage">Change Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
};
},
methods: {
changeMessage() {
this.$set(this, 'message', 'Updated Message');
}
}
};
</script>
```
在上述示例中,点击按钮会调用`changeMessage`方法,该方法通过`this.$set`将`message`属性的值更新为'Updated Message'。这样做可以确保Vue能够正确地跟踪数据的变化并重新渲染相应的视图。