计算属性的简单案例

源码：

<template>
  <div>
    <h1>{{ msg }}</h1>
    <table border="1" cellspacing="0" cellpadding="0" class="hello">
      <tr>
        <th>科目</th>
        <th>分数</th>
      </tr>
      <tr>
        <th>数学</th>
        <th><input type="text" v-model="math"></th>
      </tr>
      <tr>
        <th>语文</th>
        <th><input type="text" v-model="chinese"></th>
      </tr>
      <tr>
        <th>外语</th>
        <th><input type="text" v-model="foreign"></th>
      </tr>
      <tr>
        <th>总分</th>
        <th>{{ total }}</th>
      </tr>
      <tr>
        <th>平均分</th>
        <th>{{ average }}</th>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // 生命周期 :mounted（渲染），都是自动执行，执行一次。
  methods: {
    // 计算总分数
    Total() {
      return parseFloat(this.math + this.chinese + this.foreign)
    },
  },
  data() {
    return {
      math: 10,
      chinese: 20,
      foreign: 30,
      total: 0
    }
  },
  //computed计算属性 : 由 C = A + B 这个原理,当前的值依赖于其他的值，自动执行，只要其中的值发生变化，就会执行，执行一次。
  // 我们可以使用 computed 来替代 methods ，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
  // 而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
  computed: {
    // 计算平均分，这里写了，data里就不能在出现了， 不然会报错
    // *1运用数学公式转换将字符串为数字，相当于取整
    average() {
      return (this.math * 1 + this.chinese * 1 + this.foreign * 1) / 3
    }
  },
  mounted() {
    // 这里的this.total指的是data里的total
    // 这里的this.Total()指的是methods里的Total()
    this.total = this.Total()
  },
}
</script>

<style scoped lang="scss">
.hello {
  margin: 0 auto;
}

input {
  text-align: center;
  font-size: 18px;
  font-style: bold;
}
</style>

运行结果