Tutorial by Examples

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

template <div id="demo">{{fullName}}</div> watch example var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' } }) vm.$watch('firstName', function (val) { this.fullName = val + ' ' + this.lastName })...

Computed properties will automatically be recomputed whenever any data on which the computation depends changes. However, if you need to manually change a computed property, Vue allows you to create a setter method to do this: Template (from the basic example above): <div id="example"...

You might need a v-model on a computed property. Normally, the v-model won't update the computed property value. The template: <div id="demo"> <div class='inline-block card'> <div :class='{onlineMarker: true, online: status, offline: !status}'></div> ...