当前位置：首页 > VUE

vue实现多选效果

2026-03-10 08:53:24VUE

Vue 实现多选效果

在 Vue 中实现多选效果可以通过多种方式完成，以下是几种常见的方法：

使用 `v-model` 绑定数组

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

vue实现多选效果

<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 options: {{ selectedOptions }}</p>
  </div>
</template>

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

使用第三方组件库

许多 Vue 组件库（如 Element UI、Vuetify、Ant Design Vue）提供了现成的多选组件，可以直接使用。

以 Element UI 为例：

vue实现多选效果

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

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

自定义多选组件

如果需要更复杂的多选功能，可以自定义一个多选组件。以下是一个简单的自定义多选组件示例：

<template>
  <div>
    <div
      v-for="option in options"
      :key="option.value"
      @click="toggleOption(option.value)"
      :class="{ 'selected': selectedOptions.includes(option.value) }"
    >
      {{ option.label }}
    </div>
    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' },
      ],
      selectedOptions: [],
    };
  },
  methods: {
    toggleOption(value) {
      const index = this.selectedOptions.indexOf(value);
      if (index === -1) {
        this.selectedOptions.push(value);
      } else {
        this.selectedOptions.splice(index, 1);
      }
    },
  },
};
</script>

<style>
.selected {
  background-color: #f0f0f0;
}
</style>

使用 `v-for` 和计算属性

如果需要根据选中的值动态显示内容，可以结合计算属性实现。

<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 options: {{ selectedOptions }}</p>
    <p>Selected labels: {{ selectedLabels }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' },
      ],
      selectedOptions: [],
    };
  },
  computed: {
    selectedLabels() {
      return this.options
        .filter(option => this.selectedOptions.includes(option.value))
        .map(option => option.label);
    },
  },
};
</script>