Vue 计算属性
计算属性（Computed properties）类似于数据属性，但它们依赖于其他属性。
计算属性的写法像方法，但它们不接受任何输入参数。
当依赖项发生变化时，计算属性会自动更新，而方法则在发生某些事情时调用，例如事件处理。
当需要输出依赖于其他内容的内容时，可以使用计算属性。
计算属性是动态的
计算属性的主要优点是它的动态性，这意味着它会根据例如一个或多个数据属性的值而变化。
计算属性是我们将要学习的 Vue 实例中的第三个配置选项。我们已经学习过的另外两个配置选项是 'data' 和 'methods'。
与 'data' 和 'methods' 一样，计算属性在 Vue 实例中也有一个保留名称：'computed'。
语法
const app = Vue.createApp({
data() {
...
},
computed: {
...
},
methods: {
...
}
})
'是'或'否'的计算属性
假设我们要创建一个表单来添加购物清单中的项目，并且我们想标记新项目是否重要。我们可以像之前示例那样，在复选框被选中时添加一个 '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'
}
}
自己动手试一试 »
计算属性 vs. 方法
计算属性和方法都写成函数，但它们是不同的
- 方法在从 HTML 调用时运行，而计算属性在依赖项更改时自动更新。
- 计算属性的使用方式与数据属性相同，但它们是动态的。
