vue使用computed计算总数

在Vue中，computed属性可以用于计算和返回数据的值。它是基于依赖的响应式系统，只有当依赖的数据发生变化时，computed属性才会重新计算。

如果你想要计算一个数组中的总数，可以使用computed属性来实现。下面是一个示例：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <<p>Total: {{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', quantity: 5 },
        { id: 2, name: 'Item 2', quantity: 3 },
        { id: 3, name: 'Item 3', quantity: 2 },
      ],
    };
  },
  computed: {
    total() {
      return this.items.reduce((sum, item) => sum + item.quantity, 0);
    },
  },
};
</script>

在上面的示例中，我们有一个items数组，每个对象都有一个quantity属性。通过computed属性total，我们使用reduce方法对items数组进行遍历，并将每个item的quantity相加，最终得到总数。

这样，当items数组中的任何一个item的quantity发生变化时，total会自动重新计算并更新。