vue系列学习笔记_____计算属性

1.在模板中绑定表达式是非常便利的，但是他们实际上只用于简单的操作

如果需要多余一个表达式的逻辑，应当使用计算属性

主要有以下几点

(a).基础例子

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

var vm = new({

    el:'#demo',

    data:{a:1},

    computed:{b:function(){return this.a+1;};}; 

});

结果应该是 a =1  b = 2

这个例子中，我们声明了一个计算属性b，我们提供的函数将用作属性vm.b的getter

像绑定普通属性一样在模板中绑定计算属性

这里可以是声明式地创建这种依赖关系--计算属性的getter是干净无副作用的，因此也是易于测试和理解的。

(b).计算属性 vs.$watch

Vue.js提供了一个方法$watch，用于观察Vue实例上的数据变动

<div id ="#demo">{{fullName}}</div>

第一种

var vm = new Vue({

        el:'#demo',

        data:{

            firstName:'Foo',

            lastName:'Bar',

            fullName;'Foo Bar'

        }

});

vm.$watch({

        this.fullName = val + ' ' + this.lastName;

});

vm.$watch({

        this.fullName = this.firstName + ' ' + val;

});

第二种:

 var vm = new Vue({

        el:'#demo',

        data:{

            firstName:'Foo',

            lastName:'Bar'

        },

        computed:{

            fullName:function(){

                return this.firstName + '  ' + this.lastName;

            }

        }

});

ps:更好的办法是使用计算属性，而不是一个命令式的$watch回调。

(c).计算 setter

计算属性默认只是getter，不过在需要时也可以提供一个setter

computed:{

    fullName:{

    //getter

     get:function(){

         return this.firstName + ' ' + this.lastName;

     },

    set:function(newValue){

        var names = newValue.split(' ');

        this.firstName = names[0];

        this.lastName = names[names.length-1];

    }

     }

}