计算属性

计算属性可以像访问 data 对象的属性那样访问，但需要『以函数的方式』定义它。

<p><label>长方形的长: <input v-model="height"></label></p>
<p><label>长方形的宽: <input v-model="width"></label></p>
<!--这里没括号 -->
<p>长方形的面积： {{ area }}</p> 

data() {
  return {
    width: 0,
    height: 0
  }
},
computed: {
  // 当 width 和 height 发生变化时，area 也会同时变化，
  // 并且这总变化会体现在模板上。
  area() {
    return this.width * this.height;
  },
}

无论是在方法中，还是在其它计算属性中，亦或者是在这个组件的任意地方，都可以通过 this 来访问这个计算属性。