有时候，我们需要使用多个表达式来表示某个值，但在 Vue.js 是不允许的，它限制为一个表达式。因此，当需要多于一个表达式的逻辑时，应使用计算属性（computed）

基础栗子

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

var vm = new Vue({
    el: '#example',
    data: {
        a: 10
    },
    computed: {
        // 一个计算属性的 getter
        b: funciton(){
            // this 指向 vm 实例
            return this.a + 1;
        }
    }
})

ps. 这里的 vm.b 依赖于 vm.a，当 a 的值变化时，vm.b 相应变化；但反过来 vm.b 变化时，vm.a 不会改变。

computed VS $watch

观察 Vue 实例的数据变化，当需要根据其他数据变化时改变相应的数据时，有两种方法：计算属性和 $watch。
While, “computed” way is better.

e.g.

<div id="demo">{{fullname}}</div>

/* $watch 监听 */
var vm = new Vue({
    el: 'demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
    }
});
vm.$watch('firstName', function(val){
    this.fullName = val + ' ' + this.lastName
});
vm.$watch('lastName', function(val){
    this.fullName = this.firstName + ' ' + val
});
/* $watch 监听 END */
/* computed 计算属性 */
var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: function(){
            return this.firstName + ' ' + this.lastName
        }
    }
})
/* computed 计算属性 END */

计算 setter

computed 对象里的属性值可以为一个函数，也可以是一个对象。
当为 function 的时候，默认是一个 getter 方法（用来获取值的方法）；
当值为一个对象的时候，对象有两个属性方法，get 和 set，通过 set 这个 setter，当该变量的数据改变时，有联系的数据也可以相应改变。
如：

computed: {
    fullName: {
        // getter
        get: function() {
            return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function(newValue) {
            var names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
        }
    }
}
当调用 vm.fullName = 'D Wade'时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应更新。