计算属性就是定义一个数据，这个数据的值是根据其他数据通过一定的计算方式得到的。
这么说还是有点抽象，我们用例子来学习。
比如说现在有两颗无限宝石，一颗重30克，一颗重40克，要求页面上要显示每颗的重量，同时也要显示总重量。下面我们开始写代码
首先，计算属性的语法就是在vue对象中增加一个computed属性，形式跟methods类似
<template>
<div>力量宝石重{{ powerStone }}克</div>
<div>时间宝石重{{ timeStone }}克</div>
<div>总重{{ total }}克</div>
</template>
<script>
// 计算属性
export default {
name: 'App',
data() {
return {
powerStone: 30,
timeStone: 40,
}
},
computed: {
total() {
return this.powerStone + this.timeStone
},
},
}
</script>
<style></style>
这样最后显示
力量宝石重30克
时间宝石重40克
总重70克
效果是对的，我们先学习一下computed的语法，
定义了一个函数，名字叫total，在函数可以用this直接访问vue中data的内容，最后return了这两个数据相加的结果，
在template中使用时，直接绑定的函数的名字，不用加括号，显示的结果就是计算属性中return的值
而且计算属性是根据data的值动态计算的，比如说我们如果更改宝石的重量，计算属性total的值会自动重新计算
聪明的小伙伴会说，反正双花括号里也支持js表达式，在里面直接写相加就行了
<div>总重{{ powerStone + timeStone }}克</div>
这样写效果是可以的，但是如果计算逻辑表复杂时，明显就不太好了
下面我们来写一个复杂一点的例子
比如说我们现在有三个超级英雄，神盾局要给他们支付工资，钢铁侠工资是10000元，美国队长工资是1000元，蜘蛛侠工资是1元。现在我们要分别显示他们三人的工资，并且显示总工资。
我们先来定义数据结构。
data() {
return {
heroList: [
{
name: '钢铁侠',
salary: 10000,
},
{
name: '美国队长',
salary: 1000,
},
{
name: '蜘蛛侠',
salary: 1,
},
],
}
},
三个英雄放在了一个数组里，每个英雄是一个对象，包括他的名字name属性，和他的工资salary属性
我们用之前学的循环把他们展示出来
<ul>
<li v-for="item in heroList" :key="item">
{{ item.name }}的工资是{{ item.salary }}元
</li>
</ul>
下面该计算他们的总工资了，用一个循环把他们的工资都加起来
computed: {
total() {
let totalSalary = 0
this.heroList.forEach((item) => {
totalSalary += item.salary
})
return totalSalary
},
},
这样需求就完成了
除了数学计算之外，计算属性当然也有别的用途，举一个最常见的例子，
在移动端下拉加载数据的时候，底部显示“下拉加载”，如果加载完了，没有更多数据了，要显示“没有更多了”
我们用计算属性这样实现
<template>
<div>{{ tip }}</div>
</template>
<script>
// 计算属性
export default {
name: 'App',
data() {
return {
hasMore: true,
}
},
computed: {
tip() {
if (this.hasMore) {
return '下拉加载'
} else {
return '没有更多了'
}
},
},
}
</script>
<style></style>
大家自己写一写，改变data里的值试一试，就更能体会计算属性的方便了，
先记住一条规则，能用计算属性实现的功能，就用计算属性实现
你可以试着写一个购物车的功能，购物车里有几件商品，每个商品购买了不同数量，把他们的名称、单价、购买数量都显示出来，并且显示总价
网友评论