Vue Computed 计算属性
computed 计算属性"yes"或"no"
假设我们想要一个表单来在购物清单中创建项目，并且我们想要标记新项目是否重要。 我们可以在选中复选框时添加"true"或"false"反馈，就像我们在之前的示例中所做的那样:
示例
输入元素是动态的，以便文本反映状态。
<input type="checkbox" v-model="chbxVal"> {{ chbxVal }}
data() {
return {
chbxVal: false
}
}
亲自试一试 »
但是，如果您问某人某件事是否重要，他们很可能会回答"yes"或"no"，而不是"true"或"false"。 因此，为了使我们的表单更适合正常语言（更直观），我们应该在复选框上提供"yes"或"no"作为反馈，而不是"true"或"false"。
猜猜看，计算属性是帮助我们实现这一目标的完美工具。
示例
通过计算属性"isImportant"，我们现在可以在复选框打开和关闭时自定义向用户提供的文本反馈。
<input type="checkbox" v-model="chbxVal"> {{ isImportant }}
data() {
return {
chbxVal: false
}
},
computed: {
isImportant() {
if(this.chbxVal){
return 'yes'
}
else {
return 'no'
}
}
亲自试一试 »
Computed 计算属性与方法
Computed 计算属性和方法都写成函数，但它们是不同的:
- 方法在从 HTML 调用时运行，但计算属性在依赖项更改时自动更新。
- 计算属性的使用方式与我们使用数据属性的方式相同，但它们是动态的。
