计算属性

计算属性

1. 计算属性在Vue实例中使用computer选项来实现。
2. 计算属性的书写格式：
   computed:{ 属性名:function(){ return 返回值; } }
   在computed中定义的function不是方法，而是属性。
   计算属性在data中不用书写。
3. 例1：实现两个数值的相加
   computed:{ add:function(){ return this.numA+this.numB; } }
   ①上述代码中的计算属性是add。
   ②计算属性执行的function中涉及到的数据量被称为计算属性的依赖数据。
   ③计算属性：当该属性的依赖数据发生变化时，则该属性会重新进行计算。
   ④计算属性执行的function中renturn的返回值是计算属性计算的最终结果。
   例2：实现两个数值的加减乘除运算（add、sub、mul、div）。

		var app=new Vue({
            el:'#app',
            data:{
                numA:0,
                numB:0
            },
            computed:{
                result:function(){
                    var add=this.numA+this.numB;
                    var sub=this.numA-this.numB;
                    var mul=this.numA*this.numB;
                    var div=this.numA/this.numB;
                    return {add:add,sub:sub,mul:mul,div:div}
                }
            }

通过上面两个案例我们认识到计算属性的方便~

下面让我们进一步了解计算属性的用法：

1. 计算属性包含两个操作：
   ①getter，获取计算属性的结果，默认的function是获取结果。用get:function(){}实
   现。当依赖数据发生变化时会自动执行get函数。
   ②setter，设置计算属性的结果。用set:function(){}实现。当计算属性通过v-model绑定在表单元素上，用户对表单元素的值进行了修改时执行set函数。

computed:{
	   result:{
		     get:function(){
		       		return 返回值;
			},
			set:function(参数){
			
			}
    	}
}

2. 例：实现姓名的拆分：
   本案例是通过Vue的v-model指令实现，我们来看一下整体是这样的：
   
   然后当我们在姓名框里书写姓名的时候他会自动的把姓和名分开：
   

实现原理很简单，用我们所学的v-model指令分别绑定输入框，然后通过上述的getter和setter拆分和拼凑姓名，同样也是数据的双向绑定。

HTML代码：

	<div id="app">
        <p>姓名：<input type="text" v-model="fullName"></p>
        <p>
            姓：<input type="text" v-model="firstName">
            名：<input type="text" v-model="lastName">
        </p>
    </div>

Javascript代码：

		var app=new Vue({
            el:'#app',
            data:{
                firstName:'',
                lastName:'',
                fuX:["欧阳","慕容","迪丽","上官","百里","干将","端木","独孤"]//简单的列举了几个复姓的例子
            },
            computed:{
                fullName:{
                    get:function(){
                        return this.firstName+this.lastName;
                    },
                    set:function(newName){
                        var flag=0;  //不是复姓
                        var temp=newName.slice(0,2);
                        for(var i=0;i<this.fuX.length;i++){
                            if(temp==this.fuX[i]){
                                flag=1;         //利用for循环遍历复姓里的内容，如果有就跳出循环，输出复姓
                                break;
                            }
                        }
                        if(flag==0){
                            this.firstName=newName[0];
                            this.lastName=newName.slice(1);
                        }else{
                            this.firstName=temp;
                            this.lastName=newName.slice(2);
                        }
                    }
                }
            }
        })

原理其实很简单，就是通过v-model指令配合computed计算属性来实现，里边的一些逻辑关系很清晰

希望对你有帮助哦~