vue可以直接进行运算么_vue计算属性的使用

vue计算属性的使用

我们有时候会在模板中绑定表达式来做简单的数据处理，但是如果表达式太长，就会变得臃肿难以维护，比如

{{text.split(',').reverse().join(',')}}

表达式里面包含了3个操作，有时候可能会更加复杂，这时我们可以使用计算属性。如下

{{reversedText}}

data(){return{

text:'123,456'}

},

computed: {

reversedText:function() {//这里的this指向的是当前的vue实例

return this.text.split(',').reverse().join(','); //如果这两的text是后台接受的数据，最好加个判断数据为不为空

}

}

}

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以，计算属性还可以依赖多个

数据，只要其中任何一个数据变动，计算都会重新执行。例如：

总价：{{price}}

data(){return{

package1: [

{

name:'iPhoneX',

price:300,

count:1},

{

name:'iPad',

price:100,

count:2}

],

package2: [

{

name:'apple',

price:2,

count:5},

{

name:'orange',

price:1,

count:10}

]

}

},

computed: {

price:function() {var price = 0;for(var i = 0; i < this.package1.length; i++){

price+= this.package1[i].price * this.package1[i].count

}for(var i = 0; i < this.package2.length; i++){

price+= this.package2[i].price * this.package2[i].count

}returnprice;

}

}

}

当package1或者package2中price和count有任何变动时，计算属性都会price都会自动更新，视图中的总价也会自动变动。

每个计算属性都包含一个getter和setter，上面的例子都是计算属性的默认用法，只是利用了getter来读取。计算属性提供的setter函数，当你手动修改计算属性的值时，就可以触发setter函数，执行一些操作。例如

姓： {{firstName}}
名： {{lastName}}
姓名：{{fullName}}

data(){return{

firstName:'wang',

lastName:'leilei'}

},

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];

}

}

}

}

上面这个例子中，当改变fullName的值改变，this.fullName = "Jon Snow"; firstName和lastName的值也会跟着改变。

就算属性还有两个使用小技巧容易被忽略：一个是计算属性可以依赖其他计算属性；一个是计算属性不仅可以依赖当前vue实例，还可以依赖其他实例的数据！