Vue.js Computed Properties Basic Example


Example

Template

<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
    }
  }
})

Result

a=1, b=2

Here we have declared a computed property b. The function we provided will be used as the getter function for the property vm.b:

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

The value of vm.b is always dependent on the value of vm.a.

You can data-bind to computed properties in templates just like a normal property. Vue is aware that vm.b depends on vm.a, so it will update any bindings that depends on vm.b when vm.a changes.