Vue 教程 / Computed 计算属性

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 调用时运行，但计算属性在依赖项更改时自动更新。
计算属性的使用方式与我们使用数据属性的方式相同，但它们是动态的。

Vue 练习

通过练习测试自己

练习题:

提供正确的代码，以便"isImportant"计算属性显示在屏幕上。

<div id="app">
  <form>
    <p>
      Important item?
      <label>
         <input type="checkbox" v-model="chbxVal"> 
         
      </label>
    </p>
  </form>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        chbxVal: false
      }
    },
    : {
      isImportant() {
        if(this.chbxVal){
          return 'yes'
        }
        else {
          return 'no'
        }
      }
    }
  })
 app.mount('#app')
</script>

← CSS 绑定

观察者 →

Vue教程

Vue扩展

Vue参考