Vue.js 中如何循环遍历数据并计算总和

<template>
  <div>
    <ul>
      <li v-for='(item, index) in dataList' :key='index'>{{ item }}</li>
      <li>Total: {{ total }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data1: 10,
      data2: 20,
    };
  },
  computed: {
    dataList() {
      return [this.data1, this.data2];
    },
    total() {
      return this.data1 + this.data2;
    },
  },
};
</script>
<p>在模板中，使用 v-for 循环遍历 dataList，将其中的值显示出来。同时，在计算属性 total 中，将 data1 和 data2 相加，得到第三条数据的值，并将其返回。最终，在模板中通过 {{ total }} 来显示第三条数据的值。</p>