当前位置：首页 > VUE

vue实现多选样式

2026-01-22 07:16:31VUE

Vue 实现多选样式的方法

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

使用 v-model 绑定数组

通过 v-model 绑定一个数组，可以轻松实现多选功能。当用户勾选或取消勾选时，数组会自动更新。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
      ],
      selectedOptions: []
    };
  }
};
</script>

使用自定义样式组件

如果需要更复杂的样式，可以封装一个自定义的多选组件，通过 CSS 控制选中和未选中的状态。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
      ],
      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>
.multi-select {
  display: flex;
  gap: 10px;
}
.option {
  padding: 8px 12px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.option.selected {
  background-color: #42b983;
  color: white;
}
</style>

使用第三方 UI 库

如果项目中使用 UI 库（如 Element UI、Vuetify 或 Ant Design Vue），可以直接使用它们提供的多选组件。

以 Element UI 为例：

<template>
  <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>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
      ],
      selectedOptions: []
    };
  }
};
</script>