vue 循环数组的值 求和

你可以使用 Vue.js 的模板语法和计算属性来计算数组的总和。

在模板中，你可以使用 `v-for` 指令循环数组，然后使用双花括号语法来输出数组元素的值。

例如，假设你的数组名为 `numbers`，可以使用以下代码循环输出数组元素：

<div v-for="number in numbers">
  {{ number }}
</div>

接下来，你可以使用计算属性来计算数组的总和。计算属性是一个函数，它会根据依赖的数据计算出一个新的值。你可以在模板中使用计算属性的返回值。

例如，假设你的数组名为 `numbers`，可以使用以下代码计算数组的总和：

<template>
  <div>
    <div v-for="number in numbers">
      {{ number }}
    </div>
    <p>Total: {{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [1, 2, 3, 4, 5]
    };
  },
  computed: {
    total() {
      return this.numbers.reduce((sum, number) => sum + number, 0);
    }
  }
};
</script>

在上面的代码中，我们定义了一个计算属性 `total`，它使用 `reduce` 方法计算数组的总和。然后在模板中使用 `{{ total }}` 输出总和。