vue-2-计算属性

概述:1、带有一定逻辑的属性，在使用时可以当做data属性一样使用

2、定义在computed上。

3、计算属性缓存 vs 方法。

4、计算属性的 getter和setter。

就简单的介绍下getter和setter：

getter和setter代码示例

<div id="app">
        <p>{{msg}}</p>
        <p>{{resvermsg}}</p>
        <p> <input type="text" v-model='firstName'> + <input type="text" v-model='lastName'>=<span>{{fulllName}}</span></p>
       
    </div>
 <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'qwe',
                firstName:'',
                lastName:''
            },
            computed:{
                //计算属性的gtter
                resvermsg:function(){
                    //this指向 vm 实例
                    return this.msg.split('').reverse().join('');
                },
                
                    fulllName:{
                    //getter
                    get:function(){
                        return this.firstName+' '+this.lastName;
                    },
                    //setter
                    set:function(newValue,oldValue){
                        var names = newValue.split('');
                        this.firstName=names[0];
                        this.lastName=names[1];
                    }
                }
            
               
            }
        });
</script>

大概的效果是这样的：