1、如何使用
1.1写在computed里面
1.2写起来像一个函数
1.3其实是一个属性
2、特点:
2.1计算属性必须有返回值
2.2计算属性的名字不能和data数据的名字重复
2.3计算属性可以使用data中的值
2.4计算属性的值只随着依赖值的属性变化而变化
2.5计算属性有缓存
3、计算属性的使用场景
3.1根据已知值得到一个新值
3.2新值跟着已知值(依赖值)的变化而变化
4、计算属性 在案例中的应用
<td colspan="2">总价钱为: {{ totalPrice }}</td>
<td colspan="2">平均价: {{ avgPrice }}</td>
computed: {
totalPrice() {
let total = 0;
//forEach遍历数据
this.list.forEach((v) => {
total += v.price;
});
return total;
},
avgPrice() {
//().toFixed(2)保留两位小数
return (this.totalPrice / this.list.length).toFixed(2);
},
},