計算屬性

有點像介於資料與方法之間，既可以像資料一樣填入雙大括號，渲染頁面，同時花費緩存空間偵聽著取用的資料的值是否有變動，如果變動了，計算屬性的值也會立刻跟著更新。

請先查閱 codepen 的範例。（此文中程式碼只擷取重點）

<div id="app">
    <p>目前精靈球【數量：<span v-text="ballTotal"></span>】 【總額：<span v-text="sum"></span>】</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    ballTotal: 0
  },
  computed: {
    sum() {
      return this.ballTotal * 200;
    }
  }
})

當data裡的ballTotal值改變時，sum()也會立刻 return 相乘價位後的總金額。當然這也有行內寫法，不過一樣是可閱讀性與易維護性的問題，自行斟酌。

<div id="app">
    <p>【總額：<span v-text="ballTotal * 200"></span>】</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    ballTotal: 0
  },
  }
})

// 待續，補充 getter setter