当前位置：首页 > VUE

vue 实现多选功能

2026-02-17 00:43:33VUE

Vue 实现多选功能的方法

使用 `v-model` 绑定数组

在 Vue 中，可以通过 v-model 绑定一个数组来实现多选功能。当用户勾选多个选项时，选中的值会自动添加到数组中。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selectedOptions" 
        :value="option.value"
      >
      {{ option.label }}
    </label>
    <p>Selected: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' }
      ],
      selectedOptions: []
    };
  }
};
</script>

使用 `v-for` 动态渲染多选列表

通过 v-for 动态渲染多选框列表，可以灵活地根据数据源生成选项。

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        v-model="selectedItems" 
        :value="item.id"
      >
      {{ item.name }}
    </div>
    <p>Selected IDs: {{ selectedItems }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    };
  }
};
</script>

使用第三方组件库（如 Element UI）

如果需要更丰富的多选功能，可以使用第三方 UI 库如 Element UI 的 el-checkbox-group 组件。

<template>
  <div>
    <el-checkbox-group v-model="checkedCities">
      <el-checkbox v-for="city in cities" :key="city" :label="city">
        {{ city }}
      </el-checkbox>
    </el-checkbox-group>
    <p>Selected Cities: {{ checkedCities }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cities: ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'],
      checkedCities: []
    };
  }
};
</script>

自定义多选逻辑

如果需要自定义多选逻辑，可以通过监听 change 事件手动管理选中的值。

vue 实现多选功能

<template>
  <div>
    <label v-for="fruit in fruits" :key="fruit">
      <input 
        type="checkbox" 
        :value="fruit" 
        @change="handleSelect(fruit, $event)"
      >
      {{ fruit }}
    </label>
    <p>Selected Fruits: {{ selectedFruits }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Orange'],
      selectedFruits: []
    };
  },
  methods: {
    handleSelect(fruit, event) {
      if (event.target.checked) {
        this.selectedFruits.push(fruit);
      } else {
        this.selectedFruits = this.selectedFruits.filter(item => item !== fruit);
      }
    }
  }
};
</script>