Vue 计算属性

计算属性类似于数据属性，只不过它们依赖于其他属性。

计算属性编写方式类似于方法，但它们不接受任何输入参数。

计算属性当依赖项发生变化时会自动更新，而当发生某些事情时会调用方法，例如事件处理。

计算属性当输出依赖于其他东西的东西时使用。

计算属性是动态的

计算属性的一大优点是它是动态的，这意味着它会根据一个或多个数据属性的值而变化。

计算属性是我们将学习的 Vue 实例中的第三个配置选项。我们已经看过的前两个配置选项是“数据”和“方法”。

与“数据”和“方法”一样，计算属性在 Vue 实例中也有一个保留名称：“计算的'。

const app = Vue.createApp({
data() {
...
},
computed: {
...
},
methods: {
...
}
})

假设我们想要一个表单来在购物清单中创建项目，并且我们想要标记新项目是否重要。我们可以在选中复选框时添加“真”或“假”反馈，就像我们在之前的示例中所做的那样：

输入元素是动态的，以便文本反映状态。

<input type="checkbox" v-model="chbxVal"> {{ chbxVal }}

data() {
return {
chbxVal: false
}
}

然而，如果你问某人某件事是否重要，他们很可能会回答“是”或“否”，而不是“对”或“错”。因此，为了使我们的表单更适合正常语言（更直观），我们应该在复选框上提供“是”或“否”作为反馈，而不是“真”或“假”。

你猜怎么着，计算属性是帮助我们实现这一点的完美工具。

通过计算属性“isImportant”，我们现在可以在复选框打开和关闭时自定义向用户提供的文本反馈。

<input type="checkbox" v-model="chbxVal"> {{ isImportant }}

data() {
return {
chbxVal: false
}
},
computed: {
isImportant() {
if(this.chbxVal){
return 'yes'
}
else {
return 'no'
}
}

计算属性和方法都写成函数，但它们是不同的：