computed的set方法案例
时间: 2023-08-20 13:04:11 浏览: 51
`computed`的`set`方法可以用于给计算属性设置值,例如下面的代码:
```js
new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: {
get: function() {
return this.firstName + ' ' + this.lastName;
},
set: function(value) {
var names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
}
})
```
上面的代码中,我们定义了一个计算属性`fullName`,它的`get`方法返回`firstName`和`lastName`的拼接结果,`set`方法将输入的字符串按照空格分割成`firstName`和`lastName`两个部分,并分别设置到Vue实例的`data`对象中。
这样,我们就可以通过`v-model`指令双向绑定`fullName`,例如:
```html
<input v-model="fullName" />
```
当我们在输入框中输入一个字符串,例如`"Tom Smith"`,`set`方法会自动将其分割成`firstName`和`lastName`,并设置到Vue实例的`data`对象中。因此,`firstName`会变成`Tom`,`lastName`会变成`Smith`,而`fullName`的值也会相应地变成`Tom Smith`。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)