Vue+Bootstrap实现按钮点击切换颜色 再次点击恢复原色方案求助

单个按钮实现（以ALL按钮为例） #

核心思路是用Vue的响应式状态标记按钮是否激活，动态绑定Bootstrap按钮样式。

模板部分修改： #

<button 
  :class="['btn', isAllActive ? 'btn-primary' : 'btn-success']" 
  @click="filterAll" 
  style="margin:2px;"
>
ALL
</button>

Vue实例/组件的data部分： #

data() {
  return {
    isAllActive: false,
    // 保留原有其他数据
    genreArr: []
  }
},
methods: {
  filterAll() {
    this.isAllActive = !this.isAllActive
    // 保留原有其他过滤逻辑
  }
}

点击时切换isAllActive的布尔值，按钮样式会自动切换，你可以根据需求自行替换激活态的Bootstrap按钮类。 #

动态生成按钮实现 #

根据使用场景分两种常用实现：

场景1：单选（同一时间仅能选中一个分类按钮 #

用单个变量存储当前选中的分类值即可：

模板修改：

<div class="btn-group btn-group-toggle" v-for="gen in genreArr" data-toggle="buttons">
  <button 
    :class="['btn', activeGen === gen ? 'btn-danger' : 'btn-warning']"
    @click="filterOne(gen)"
    style="margin:2px;"
  >
  {{gen}}
  </button>
</div>

对应JS部分：

data() {
  return {
    activeGen: '', // 存储当前激活的分类
    genreArr: []
  }
},
methods: {
  filterOne(gen) {
    // 点击已激活的按钮则取消激活，否则切换为当前点击的分类
    this.activeGen = this.activeGen === gen ? '' : gen
    // 保留原有其他过滤逻辑
  }
}

场景2：多选（可同时选中多个分类按钮） #

用数组存储所有已选中的分类：

模板修改：

<div class="btn-group btn-group-toggle" v-for="gen in genreArr" data-toggle="buttons">
  <button 
    :class="['btn', selectedGenres.includes(gen) ? 'btn-danger' : 'btn-warning']"
    @click="filterOne(gen)"
    style="margin:2px;"
  >
  {{gen}}
  </button>
</div>

对应JS部分：

data() {
  return {
    selectedGenres: [], // 存储所有已激活的分类
    genreArr: []
  }
},
methods: {
  filterOne(gen) {
    const index = this.selectedGenres.indexOf(gen)
    if (index > -1) {
      // 已选中则移除
      this.selectedGenres.splice(index, 1)
    } else {
      // 未选中则添加
      this.selectedGenres.push(gen)
    }
    // 保留原有其他过滤逻辑
  }
}

如果需要自定义激活态样式，直接在style标签中写自定义类替换上面绑定即可，无需引入其他依赖。

内容的提问来源于stack exchange，提问作者newmon