如何实现多选场景下选中Elevated Button时单独变色？

常见错误根源 #

• 用了全局状态变量：所有按钮绑定同一个选中状态，触发时全量更新
• CSS选择器没精准定位：比如用了全局的按钮激活样式，没给单个按钮做独立状态标识

具体解决办法 #

1. Vue项目场景 #

别用单个变量存选中状态，改用数组记录选中的按钮ID/标识：

<template>
  <button 
    v-for="btn in buttonList" 
    :key="btn.id"
    :class="{ 'active': selectedIds.includes(btn.id) }"
    @click="toggleBtn(btn.id)"
  >
    {{ btn.label }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      buttonList: [{id: 1, label: '选项1'}, {id: 2, label: '选项2'}, {id: 3, label: '选项3'}],
      selectedIds: []
    }
  },
  methods: {
    toggleBtn(id) {
      const idx = this.selectedIds.indexOf(id)
      idx > -1 ? this.selectedIds.splice(idx, 1) : this.selectedIds.push(id)
    }
  }
}
</script>

<style scoped>
.active {
  background-color: #000;
  color: #fff;
}
</style>

2. 原生JS场景 #

给每个按钮绑定独立点击事件，只切换自身的样式类：

<button class="multi-option">选项A</button>
<button class="multi-option">选项B</button>
<button class="multi-option">选项C</button>

<style>
.multi-option.active {
  background-color: #000;
  color: #fff;
}
</style>

<script>
const btns = document.querySelectorAll('.multi-option')
btns.forEach(btn => {
  btn.addEventListener('click', function() {
    this.classList.toggle('active')
  })
})
</script>

3. CSS排查修正 #

检查是否写了这类错误样式：

/* 错误：所有按钮点击时都会变黑 */
button:active {
  background-color: #000;
}

/* 正确：仅给选中的按钮加样式 */
button.active {
  background-color: #000;
}

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