Vue 3.x: 使用 computed 计算属性处理稍复杂的业务逻辑
在上一篇文章的示例里边,我们通过点击一个按钮来展示一个问题的答案,而按钮的文案会根据答案的显示与否,而动态的发生变化。但是呢,这个文案的判断逻辑我们是写在 html 模板里边的,用了一串三目运算符:
<button @click="showAnswer = !showAnswer">
{{ showAnswer ? "隐藏" : "显示" }}答案
</button>
对于只在一个地方使用这个逻辑的时候,可能并没有什么问题,但是如果有多次使用到这个逻辑的地方,那么我们需要反复复制粘贴这个逻辑: