基本例子

模板

<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 的任何绑定。