vue中计算属性累加计算

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>