基本例子

模板

<div id="example">
  a={{ a }}, b={{ b }}
</div>

JavaScript

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // a computed getter
    b: function () {
      // `this` points to the vm instance
      return this.a + 1
    }
  }
})

結果

a=1, b=2

這裡我們宣告瞭一個計算屬性 b。我們提供的函式將用作屬性 vm.b 的 getter 函式：

console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3

vm.b 的值總是取決於 vm.a 的值。

你可以像普通屬性一樣將資料繫結到模板中的計算屬性。Vue 意識到 vm.b 依賴於 vm.a，因此當 vm.a 發生變化時，它將更新依賴於 vm.b 的任何繫結。