vue中computed的用法

dmr

computed 的英文意思是计算，那么顾名思义，vue中的computed也与计算有关，他是专门用来处理复杂表达式的，在vue中，不建议在模板语法中写复杂的表达式，如：x+y+(z-1) 这种，所以vue建了一个computed用来处理这类表达式，使用方法其实也不难，在computed里面建一个函数并写表达式，然后在想要引用的地方将之当成data里的值引用即可，例如想要在模板语法里面用，只需要写函数名即可，并且不用加括号，具体例子如下：
1.dignyi定义的值
data(){
    return{
        num1: 10,
        num2: 20,
        nums: 5
    }
},

2.然后在computed中写一条表达式：
computed:{
    addNum:function(){
        return Number(this.nums) + Number(this.num1) + Number(this.num2);
    }
},

3.之后在模板语法中应用

<div>{{addNum}}</div> //addNum即为定义的表达式

微信扫一扫，分享更方便