vue computed 计算属性使用 简单写法

计算属性 — 求和及平均数

效果

关键代码

HTML

<tr style="background-color: #eee">
	<td>统计:</td>
	<td colspan="2">总价钱为: {{ allPrice }}</td>
	<td colspan="2">平均价: {{ avgPrice }}</td>
</tr>

data 参数

export default {
  data() {
    return {
      name: "", // 名称
      price: 0, // 价格
      list: [
        { id: 100, name: "外套", price: 199, time: new Date('2010-08-12')},
        { id: 101, name: "裤子", price: 34, time: new Date('2013-09-01') },
        { id: 102, name: "鞋", price: 25.4, time: new Date('2018-11-22') },
        { id: 103, name: "头发", price: 19900, time: new Date('2020-12-12') }
      ],
    };
  },
  

computed 计算属性方法

computed: {
	allPrice(){
	// 1. 求总价
	return this.list.reduce((sum, obj) => sum += obj.price, 0);
	},
	avgPrice(){
	// 2. 求均价 - 保留2位小数
	return (this.allPrice / this.list.length).toFixed(2);
	}
}