vue3 json数据合计

在Vue3中，你可以通过使用计算属性来合计JSON数据。首先，你需要将JSON数据绑定到Vue实例的data中。然后，你可以使用计算属性来对数据进行合计。

以下是一个示例代码，演示了如何在Vue3中合计JSON数据：

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

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const jsonData = ref([
      { id: 1, name: 'Product 1', price: 10 },
      { id: 2, name: 'Product 2', price: 20 },
      { id: 3, name: 'Product 3', price: 30 },
    ]);

    const total = computed(() => {
      return jsonData.value.reduce((sum, item) => sum + item.price, 0);
    });

    return {
      jsonData,
      total,
    };
  },
};
</script>

在上面的代码中，我们首先将JSON数据绑定到名为`jsonData`的`ref`中。然后，我们使用`computed`创建了一个计算属性`total`，它通过使用`reduce`函数计算了所有产品的总价格。最后，我们在模板中使用`jsonData`和`total`。