当前位置：首页 > VUE

vue按钮实现多选

2026-01-17 01:59:33VUE

Vue 按钮实现多选的方法

在 Vue 中实现按钮多选功能，可以通过绑定 v-model 到数组或对象，结合样式控制来实现。以下是几种常见方法：

方法一：使用 `v-model` 绑定数组

通过将 v-model 绑定到一个数组，当按钮被选中时，其对应的值会被添加到数组中。

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

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

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

方法二：使用复选框模拟按钮

通过隐藏复选框的默认样式，用按钮样式替代，实现多选效果。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selected" 
        :value="option.value" 
        style="display: none"
      >
      <span :class="{ active: selected.includes(option.value) }">
        {{ option.label }}
      </span>
    </label>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

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

<style>
.active {
  background-color: #42b983;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

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

如果项目中使用 Element UI 等组件库，可以直接使用其提供的多选按钮组件。

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

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