当前位置：首页 > VUE

vue怎么实现多选状态

2026-01-21 19:24:13VUE

Vue 实现多选状态的方法

使用 `v-model` 绑定数组

通过 v-model 绑定一个数组，可以自动收集多选的值。适用于复选框组或多选下拉框。

<template>
  <div>
    <input type="checkbox" v-model="selectedItems" value="item1"> Item 1
    <input type="checkbox" v-model="selectedItems" value="item2"> Item 2
    <input type="checkbox" v-model="selectedItems" value="item3"> Item 3
    <p>Selected: {{ selectedItems }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: []
    };
  }
};
</script>

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

结合 v-for 动态生成多选框，适合从数据源动态加载选项。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, label: 'Option A', value: 'a' },
        { id: 2, label: 'Option B', value: 'b' },
        { id: 3, label: 'Option C', value: 'c' }
      ],
      selectedItems: []
    };
  }
};
</script>

使用多选下拉框

通过 <select multiple> 实现多选下拉框，v-model 绑定数组即可。

<template>
  <div>
    <select v-model="selectedOptions" multiple>
      <option value="opt1">Option 1</option>
      <option value="opt2">Option 2</option>
      <option value="opt3">Option 3</option>
    </select>
    <p>Selected: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: []
    };
  }
};
</script>

自定义多选逻辑

通过手动管理选中状态，适合需要复杂交互的场景。

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      @click="toggleSelection(item)"
      :class="{ 'active': isSelected(item) }"
    >
      {{ item.label }}
    </div>
    <p>Selected: {{ selectedItems }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, label: 'Item 1' },
        { id: 2, label: 'Item 2' },
        { id: 3, label: 'Item 3' }
      ],
      selectedItems: []
    };
  },
  methods: {
    toggleSelection(item) {
      const index = this.selectedItems.findIndex(i => i.id === item.id);
      if (index === -1) {
        this.selectedItems.push(item);
      } else {
        this.selectedItems.splice(index, 1);
      }
    },
    isSelected(item) {
      return this.selectedItems.some(i => i.id === item.id);
    }
  }
};
</script>

<style>
.active {
  background-color: #eee;
}
</style>

使用第三方组件库

若需更丰富的功能（如全选、搜索过滤），可直接使用第三方库如 Element UI 或 Vuetify。

vue怎么实现多选状态

<template>
  <el-checkbox-group v-model="selectedItems">
    <el-checkbox v-for="item in items" :key="item.id" :label="item.value">
      {{ item.label }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, label: 'Option 1', value: 'opt1' },
        { id: 2, label: 'Option 2', value: 'opt2' }
      ],
      selectedItems: []
    };
  }
};
</script>