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.
