vue计算属性传参,并在get中使用,在set中通过传递的参数赋值
时间: 2023-11-22 19:53:35 浏览: 133
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
可以通过定义一个计算属性方法,并在方法中返回一个函数来实现传参的目的,然后可以在该函数的 get 和 set 中进行需要的操作。
例如,我们需要定义一个计算属性 `fullName`,它需要接收两个参数 `firstName` 和 `lastName`,并将它们拼接起来返回完整的姓名。同时,我们也希望能够通过该计算属性修改 `firstName` 和 `lastName` 的值。
```html
<template>
<div>
<input v-model="firstName"/>
<input v-model="lastName"/>
<p>Full Name: {{ fullName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
// 返回一个函数,接收 firstName 和 lastName 两个参数
return (firstName, lastName) => {
if (firstName && lastName) {
// 如果传入了新值,更新 data 中的 firstName 和 lastName
this.firstName = firstName
this.lastName = lastName
}
// 返回拼接后的完整姓名
return `${this.firstName} ${this.lastName}`
}
}
}
}
</script>
```
在上面的例子中,我们通过计算属性 `fullName` 返回了一个函数,该函数接收两个参数 `firstName` 和 `lastName`。在函数的 get 方法中,我们返回了当前 `firstName` 和 `lastName` 拼接后的值。在函数的 set 方法中,我们判断了是否传入了新的 `firstName` 和 `lastName`,如果是,则更新 data 中的值。
阅读全文