vue3 javascript 多字段求和技巧

在 Vue 3 中，如果你需要在一个组件中处理多个字段的求和，你可以通过计算属性（computed properties）或者方法（methods）来实现。这里我将展示两种主要的方法：

方法 1：使用计算属性（Computed Properties）

计算属性是 Vue 3 中非常强大的功能，它允许你定义一些依赖其他数据的属性，当依赖的属性变化时，计算属性会自动重新计算。

假设你有一个用户对象，包含多个字段（如income1, income2, income3），你想要计算这些字段的总和。

<template><div>总计收入: {{ totalIncome }}</div>
</template><script setup>
import { computed, reactive } from 'vue';const user = reactive({income1: 100,income2: 200,income3: 300
});const totalIncome = computed(() => {return user.income1 + user.income2 + user.income3;
});
</script>

方法 2：使用方法（Methods）

如果你更喜欢使用方法而不是计算属性，你也可以在 Vue 组件中定义一个方法来计算总和。这种情况下，你可以在模板中调用这个方法。

<template><div>总计收入: {{ calculateTotalIncome() }}</div>
</template><script setup>
import { reactive } from 'vue';const user = reactive({income1: 100,income2: 200,income3: 300
});function calculateTotalIncome() {return user.income1 + user.income2 + user.income3;
}
</script>

方法 3：动态求和（例如，来自数组）

如果你有一组字段存储在一个数组中，你可以使用reduce方法来动态计算总和。这在处理动态数量的字段时非常有用。

<template><div>总计收入: {{ totalIncome }}</div>
</template><script setup>
import { computed, reactive } from 'vue';const user = reactive({incomes: [100, 200, 300] // 可以动态添加或删除元素
});const totalIncome = computed(() => {return user.incomes.reduce((sum, current) => sum + current, 0); // 初始值为0
});
</script>