我们有时候会在模板中绑定表达式来做简单的数据处理,但是如果表达式太长,就会变得臃肿难以维护,比如
<div>
{{text.split(',').reverse().join(',')}}
</div>
表达式里面包含了3个操作,有时候可能会更加复杂,这时我们可以使用计算属性。如下
<template>
<div>
{{reversedText}}
</div>
</template>
<script>
export default {
data(){
return{
text: '123,456'
}
},
computed: {
reversedText: function () {
//这里的this指向的是当前的vue实例
return this.text.split(',').reverse().join(',');
}
}
}
</script>
在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以,计算属性还可以依赖多个
数据,只要其中任何一个数据变动,计算都会重新执行。例如:
<template>
<div>
总价:{{price}}
</div>
</template>
<script>
export default {
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
}
return price;
}
}
}
</script>
当package1或者package2中price和count有任何变动时,计算属性都会price都会自动更新,视图中的总价也会自动变动。
每个计算属性都包含一个getter和setter,上面的例子都是计算属性的默认用法,只是利用了getter来读取。计算属性提供的setter函数,当你手动修改计算属性的值时,就可以触发setter函数,执行一些操作。例如
<template>
<div>
姓: {{firstName}}<br>
名: {{lastName}}<br>
姓名:{{fullName}}
</div>
</template>
<script>
export default {
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];
}
}
}
}
</script>
上面这个例子中,当改变fullName的值改变,this.fullName = "Jon Snow"; firstName和lastName的值也会跟着改变。
就算属性还有两个使用小技巧容易被忽略:一个是计算属性可以依赖其他计算属性;一个是计算属性不仅可以一开当前vue实例,还可以依赖其他实例的数据!