1、基本使用
在computed中定义一个函数(看起来是一个函数,其实是一个属性),命名按照属性规范命名。
2、应用场景
当A这个数据逻辑很复杂时,就把这个数据A写道计算属性中。比如购物车结算这一块
3、值
带有返回值return的函数,计算属性a和data中的数据用法一样。计算属性在computed中进行定义,无需再在data中定义,在template中直接可进行使用,使用方式与data中定义的数据一样。
在methods中使用直接调用 this.totalPrice 即可
<template>
<div>
<div>{
{ totalPrice }}</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, price: 10 },
{ id: 2, price: 20 },
{ id: 3, price: 40 },
],
};
},
// 计算属性
computed: {
totalPrice() {
var sum = 0;
for (let i = 0; i < this.list.length; i++) {
sum += this.list[i].price;
}
return sum;
},
},
};
</script>