当前位置：首页 > VUE

vue可选按钮实现

2026-01-19 10:11:49VUE

实现 Vue 可选按钮

在 Vue 中实现可选按钮通常涉及单选或多选功能，可以通过 v-model 绑定数据，结合样式切换完成。以下是两种常见实现方式：

单选按钮组

使用 v-model 绑定一个变量，通过点击切换选中状态：

vue可选按钮实现

<template>
  <div>
    <button 
      v-for="option in options" 
      :key="option.value"
      @click="selected = option.value"
      :class="{ 'active': selected === option.value }"
    >
      {{ option.label }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: 'opt1' },
        { label: '选项2', value: 'opt2' }
      ]
    };
  }
};
</script>

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

多选按钮组

通过数组存储选中的值，使用 v-model 绑定到复选框：

vue可选按钮实现

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

<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { label: '选项A', value: 'optA' },
        { label: '选项B', value: 'optB' }
      ]
    };
  }
};
</script>

自定义样式切换

若需更灵活的样式控制，可通过计算属性动态生成类名：

<template>
  <button 
    @click="toggleSelection"
    :class="buttonClasses"
  >
    点击切换
  </button>
</template>

<script>
export default {
  data() {
    return {
      isSelected: false
    };
  },
  computed: {
    buttonClasses() {
      return {
        'selected': this.isSelected,
        'unselected': !this.isSelected
      };
    }
  },
  methods: {
    toggleSelection() {
      this.isSelected = !this.isSelected;
    }
  }
};
</script>

<style>
.selected {
  border: 2px solid #42b983;
}
.unselected {
  opacity: 0.6;
}
</style>

使用第三方组件库

若项目中使用 Element UI 或 Vuetify 等库，可直接调用现成的按钮组件：

<!-- Element UI 示例 -->
<el-radio-group v-model="selected">
  <el-radio-button label="opt1">选项1</el-radio-button>
  <el-radio-button label="opt2">选项2</el-radio-button>
</el-radio-group>

<!-- Vuetify 示例 -->
<v-btn-toggle v-model="selected" multiple>
  <v-btn value="optA">选项A</v-btn>
  <v-btn value="optB">选项B</v-btn>
</v-btn-toggle>