vue中computed的用法

computed 的英文意思是計算，那么顧名思義，vue中的computed也與計算有關，他是專門用來處理復雜表達式的，在vue中，不建議在模板語法中寫復雜的表達式，如：x+y+(z-1) 這種，所以vue建了一個computed用來處理這類表達式，使用方法其實也不難，在computed里面建一個函數並寫表達式，然后在想要引用的地方將之當成data里的值引用即可，例如想要在模板語法里面用，只需要寫函數名即可，並且不用加括號，具體例子如下：

 

data中定義三個值：

data(){
    return{
        num1: 10,
        num2: 20,
        nums: 5
    }
},

 

然后在computed中寫一條表達式：

computed:{ //計算函數，復雜的計算都應該放在這里，盡量不要直接在模板語法里面計算，在此處計算的值是會動態變的，即計算的數中有一個值變了，最終結果也會跟着變，類似於封裝的計算函數
    addNum:function(){ //addnum可以直接在模板語法里面用，相當於data內的值
        return Number(this.nums) + Number(this.num1) + Number(this.num2);
    }
},

 

之后在模板語法中應用

<div>{{addNum}}</div> //addNum即為定義的表達式

 

看下效果：

可以看到按鈕中顯示出了表達式的值

如果表達式內參數的值變化的話最終的值也是會跟着變的