在 Vue 开发中,模板表达式虽然简洁,但一旦逻辑变多,模板就会变得臃肿难维护。这时候,计算属性就是最佳选择。
Vue 3 提供了两种编写计算属性的方式:选项式 API 和组合式 API。
选项式 API 写法
在 Options API 中,我们直接在 computed 选项中声明。
<script>
export default {
data: () => ({
age: 20, // 年龄
birthday: '' // 生日
}),
computed: {
// 年龄阶段
ageState() {
if (this.age < 18) {
return '未成年'
} else if (this.age < 35) {
return '青年'
} else if (this.age < 50) {
return '中年'
} else {
return '老年'
}
},
// 星座
constellation() {
let birArr = this.birthday.split('-')
let month = (birArr[])
day = (birArr[])
(month) {
:
(day <= )
:
(day <= )
:
(day <= )
:
(day <= )
:
(day <= )
:
(day <= )
:
(day <= )
:
(day <= )
:
(day <= )
:
(day <= )
:
(day <= )
:
(day <= )
:
}
}
}
}
年龄:
年龄阶段(简单):{{ age < 18 ? '未成年' : '成年' }}
年龄阶段(复杂):{{ ageState }}
生日:
星座:{{ constellation }}

