Vue computed set
时间: 2023-07-05 18:21:48 浏览: 52
在Vue中,computed属性是一个计算属性,它会根据依赖的数据动态计算出一个新的值。computed属性默认是只读的,即不能通过computed属性修改原有数据。如果你需要在computed属性中修改原有数据,可以使用set方法。
例如,如果我们有一个计算属性fullName,它由firstName和lastName组成,我们可以通过以下方式在computed属性中设置数据:
```
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
```
在这个例子中,我们定义了一个fullName计算属性,并且同时定义了get和set方法。get方法返回firstName和lastName的组合字符串,set方法接受一个新的值,并将其分解为firstName和lastName两个属性。这样我们就可以通过修改computed属性来同时修改firstName和lastName两个属性的值。
相关问题
vue computed set不生效
在Vue中,computed属性的set方法默认是不会被执行的,只有在对computed属性进行重新赋值时才会触发set方法。这是因为computed属性是根据它所依赖的响应式数据进行计算的,而set方法的作用是用于修改computed属性所依赖的响应式数据。
如果你想要在computed属性的set方法中执行一些操作,可以通过对computed属性进行重新赋值来触发set方法。例如,对于一个名为fullName的computed属性,你可以通过对它进行赋值来触发set方法,如下所示:
```javascript
app.fullName = "new value";
```
这样就会触发fullName的set方法,并执行其中的操作。你可以在set方法中使用console.log()方法来输出一些信息,以便在控制台中查看set方法是否被执行。
请注意,如果你只是获取computed属性的值而没有对它进行重新赋值,那么get方法会被执行,而set方法不会被执行。
Vue computed set里面可以修改newval吗
在Vue的computed set方法中,是可以修改newVal的值的。当computed属性被修改时,set方法会被调用,传入一个新的值newVal。我们可以在set方法中对这个newVal进行修改,然后将修改后的值赋值给其他的数据属性。
例如,在上面的例子中,如果我们希望fullName只由firstName和lastName的首字母组成,我们可以进行如下修改:
```
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0][0]
this.lastName = names[names.length - 1][0]
}
}
}
```
在这个例子中,我们将set方法修改为只将firstName和lastName的首字母作为fullName的值。这样,当我们修改fullName时,实际上修改的是firstName和lastName的首字母。