Vue计算属性

本节讲解 Vue 计算属性，计算属性就是通过其他数据算出一个新的数据，例如求一组数字的和、求平均数等都可以使用计算属性。

计算属性是 computed，它和 data、methods 平级，下面使用计算属性求一组数字的和，首先需要在 data 中声明数据，代码如下。

<template>
  <div class="hello">
   //3．调用计算属性
    <h1>{{ getSum }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return { //1．声明num1、num2、num3
      num1: 10,
      num2: 20,
      num3: 30
    };
  },
  //2．在computed属性中创建计算属性
  computed: {
    getSum() {
      return this.num1 + this.num2 + this.num3;
    }
  }
};
</script>

代码解析如下。

计算属性声明时是一个方法，并且必须有 return 返回值。
计算属性调用时不能是方法调用，而是普通的变量调用，所以直接使用 {{getSum}} 即可。

求平均数，代码如下。

computed: {
  getSum() {
    return this.num1 + this.num2 + this.num3;
  },
  getAvg() {
    return this.getSum / 3;
  }
}

视图层调用代码如下。

<h1>{{getAvg}}</h1>

代码解析如下。

可以直接调用其他计算属性，作为值使用。

案例：输入用户名和密码，改变按钮样式。

可以通过计算属性模拟用户登录，当用户输入用户名和密码时，登录按钮变色，代码如下。

<template>
  <div class="hello">
    <input type="text" v-model="user" />
    <input type="text" v-model="password" />
 //1．给登录按钮绑定样式
    <input type="button" value="登录" :class="{bg: getActive}" />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      user: "",
      password: ""
    };
  },
  computed: {
      //2．声明计算属性，返回值为true或false
    getActive() {
      if (this.user == "" || this.password == "") {
        return false;
      }
      return true;
    }
  }
};
</script>

<style scoped>
.bg {
  background: red;
}
</style>

代码解析如下。

上述案例中，getActive 计算属性的返回值为 true 或 false，当为 true 时按钮的 bg 样式生效，当为 false 时按钮的 bg 样式隐藏。