vue - computed 计算属性
模板内的表达式非常便利,但是设计它们的初衷适用于简单运算的。
在模板中放入太多的逻辑会让模板过重且难以维护。
例如:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方,模板不再是简单地声明式逻辑。你必须看一段事件才能意识到,这里是想要显示变量message 的反转字符串。当你想要在模板中的多出包含此翻转字符串时,就会更加难以处理。
所以对于任何复杂逻辑,你都应当使用计算属性。
应用场景:
1:过滤和排序
我们可以利用计算属性来过滤和排序列表数据。
例如:定义一个计算属性,过滤掉所有的空数据或不需要的数据。
computed: {
filteredList: function() {
return this.list.filter(function(item) {
return item && item.name && item.name.trim() !== ''
})
.sort(function(a, b) {
return a.name.toLowerCase() > b.name.toLowerCase()
})
}
}
2:格式化数据
我们可以利用计算属性来格式化数据。
例如格式化货币、日期和时间等。
computed: {
formattedPrice: function() {
return '¥' + this.price.toFixed(2)
},
formattedDate: function() {
return moment(this.date).format('yyyy-MM-dd')
}
}
在上述示例中,我们定义了两个计算属性,分别称为formattedPrice和formattedDate。它们分别格式化了货币和日期数据。
3:依赖关系
当一个数据属性的值依赖于其他多个属性的值时,可以使用computed属性。
例如,计算两个数值属性的和或差。
<template>
<div>
<p>Number 1: {{ number1 }}</p>
<p>Number 2: {{ number2 }}</p>
<p>Sum: {{ sum }}</p>
</div>
</template>
<script>
export default {
data() {
return {
number1: 11,
number2: 22,
};
},
computed: {
sum() {
// 计算两个数值属性的和
return this.number1 + this.number2;
},
},
};
</script>
4:字符串拼接
当需要将多个数据属性拼接成一个字符串时,可以使用computed属性。
例如,将用户名和用户角色拼接成一个欢迎语句。
<template>
<div>
<p>Username: {{ username }}</p>
<p>Role: {{ role }}</p>
<p>Welcome: {{ welcomeMessage }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username:'Freddie Mercury',
role: 'Lead singer',
};
},
computed: {
welcomeMessage() {
// 将用户名和用户角色拼接成一个欢迎语句
return `Welcome, ${this.username}! You are a ${this.role}.`;
},
},
};
</script>
5:计算属性的getter 和 setter
我们可以利用计算属性的getter和setter方法来实现更加灵活的属性计算。
例如,我们可以定义一个计算属性,当我们为它赋值时,它将自动更新相关的数据。如下所示:
computed: {
fullName: {
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的计算属性,它具有getter和setter方法。
当我们获取该属性时,它会将firstName和lastName组合成一个完整的名称;
而当我们将该属性设置为某个新值时,它会将该值分割为名和姓,并在firstName和lastName属性上自动更新。
需要注意:
computed属性只能用于同一个组件内部的数据计算,不能用于跨组件的数据传递。
如果需要在不同组件之间共享计算属性,可以考虑使用Vuex或事件总线等方式来实现。