vue实现多选项求和
实现多选项求和的基本思路
在Vue中实现多选项求和功能，通常需要绑定一组复选框或单选按钮到数据模型，并通过计算属性实时计算选中项的和。核心在于利用v-model管理选中状态，结合computed属性动态计算总和。
数据准备与绑定
定义选项数组和选中状态数据。每个选项对象应包含value（数值）和selected（布尔值）属性：
data() {
return {
options: [
{ value: 10, selected: false },
{ value: 20, selected: false },
{ value: 30, selected: false }
]
}
}模板中的复选框绑定
使用v-for渲染选项列表，并通过v-model双向绑定到selected属性：
<div v-for="(option, index) in options" :key="index">
<input
type="checkbox"
v-model="option.selected"
:value="option.value"
>
<label>{{ option.value }}</label>
</div>计算总和
通过计算属性过滤出选中的选项，并累加它们的值：
computed: {
totalSum() {
return this.options
.filter(opt => opt.selected)
.reduce((sum, opt) => sum + opt.value, 0)
}
}显示结果
在模板中直接显示计算属性结果：
<p>总和: {{ totalSum }}</p>完整示例代码
<template>
<div>
<div v-for="(option, index) in options" :key="index">
<input
type="checkbox"
v-model="option.selected"
:value="option.value"
>
<label>{{ option.value }}</label>
</div>
<p>总和: {{ totalSum }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 10, selected: false },
{ value: 20, selected: false },
{ value: 30, selected: false }
]
}
},
computed: {
totalSum() {
return this.options
.filter(opt => opt.selected)
.reduce((sum, opt) => sum + opt.value, 0)
}
}
}
</script>动态添加选项的实现
如果需要支持动态添加新选项，可以扩展方法：
methods: {
addOption(value) {
this.options.push({ value, selected: false })
}
}使用单选按钮的变体
若改为单选模式，只需将checkbox改为radio，并确保v-model绑定到同一个变量：
<input
type="radio"
v-model="selectedValue"
:value="option.value"
>对应的计算属性简化为：
computed: {
totalSum() {
return this.selectedValue || 0
}
}
