当前位置：首页 > VUE

vue实现多选项求和

2026-02-21 18:11:44VUE

实现思路

在Vue中实现多选项求和功能，通常需要绑定复选框或单选按钮的数据，监听用户选择变化，动态计算选中项的和。核心在于利用v-model管理选项状态，通过计算属性实时求和。

基础实现示例

假设需要计算选中商品的价格总和：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        v-model="selectedItems" 
        :value="item.price"
      >
      {{ item.name }} - ￥{{ item.price }}
    </div>
    <p>总价: ￥{{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '商品A', price: 100 },
        { id: 2, name: '商品B', price: 200 },
        { id: 3, name: '商品C', price: 300 }
      ],
      selectedItems: []
    }
  },
  computed: {
    total() {
      return this.selectedItems.reduce((sum, price) => sum + price, 0)
    }
  }
}
</script>

对象数组处理

当选项是对象数组时，需存储整个对象而非单个值：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        v-model="selectedItems" 
        :value="item"
      >
      {{ item.name }} - ￥{{ item.price }}
    </div>
    <p>总价: ￥{{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '商品A', price: 100 },
        { id: 2, name: '商品B', price: 200 },
        { id: 3, name: '商品C', price: 300 }
      ],
      selectedItems: []
    }
  },
  computed: {
    total() {
      return this.selectedItems.reduce((sum, item) => sum + item.price, 0)
    }
  }
}
</script>

带数量的求和

如果需要支持数量选择，可以扩展数据结构：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        v-model="item.checked"
      >
      <input 
        type="number" 
        v-model.number="item.quantity" 
        min="1" 
        :disabled="!item.checked"
      >
      {{ item.name }} - 单价￥{{ item.price }}
    </div>
    <p>总价: ￥{{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '商品A', price: 100, checked: false, quantity: 1 },
        { id: 2, name: '商品B', price: 200, checked: false, quantity: 1 },
        { id: 3, name: '商品C', price: 300, checked: false, quantity: 1 }
      ]
    }
  },
  computed: {
    total() {
      return this.items
        .filter(item => item.checked)
        .reduce((sum, item) => sum + (item.price * item.quantity), 0)
    }
  }
}
</script>