Vue 计算属性
计算属性类似于数据属性，不同之处在于它们依赖于其他属性。
计算属性的写法类似于方法，但它们不接受任何输入参数。
当依赖项发生变化时，计算属性会自动更新，而方法则是在某些事件发生时才会被调用，例如事件处理。
计算属性用于输出依赖于其他事物的內容。
计算属性是动态的
计算属性的最大优势在于它是动态的，这意味着它会根据一个或多个数据属性的值发生变化。
计算属性是我们将学习的 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
}
}
亲自尝试 »
但是，如果你问别人某件事是否重要，他们很可能回答 '是' 或 '否'，而不是 'true' 或 'false'。因此，为了使我们的表单更符合日常语言（更直观），我们应该使用 '是' 或 '否' 作为复选框的反馈，而不是 'true' 或 'false'。
猜猜看，计算属性是帮助我们实现这一目标的完美工具。
示例
使用计算属性 'isImportant'，我们现在可以自定义复选框打开和关闭时显示给用户的文本反馈。
<input type="checkbox" v-model="chbxVal"> {{ isImportant }}
data() {
return {
chbxVal: false
}
},
computed: {
isImportant() {
if(this.chbxVal){
return '是'
}
else {
return '否'
}
}
亲自尝试 »
计算属性与方法
计算属性和方法都写成函数，但它们是不同的。
- 方法在从 HTML 中调用时运行，而计算属性在依赖项发生变化时自动更新。
- 计算属性的使用方式与数据属性相同，但它们是动态的。
