VueJs实现两按钮点击时互相切换颜色的代码示例

核心逻辑 #

不用写复杂的分支判断，本质上两个按钮永远保持一黑一白的状态，点击任意按钮时二者颜色互换即可，完全匹配需求：

• 点击当前为白色的按钮：该按钮变为黑色，另一个原本为黑色的按钮变为白色
• 点击当前为黑色的按钮：二者颜色直接互换

实现时只需要一个响应式状态标记当前哪个按钮为白色，通过计算属性/动态class给两个按钮绑定对应样式，点击时翻转状态就能实现效果。

可直接运行的代码示例（Vue3 组合式API/<script setup>语法，官方推荐新手优先学习的写法） #

<template>
  <div class="btn-wrap">
    <button 
      class="color-btn"
      :style="btnAStyle"
      @click="handleToggle"
    >
      按钮A
    </button>
    <button 
      class="color-btn"
      :style="btnBStyle"
      @click="handleToggle"
    >
      按钮B
    </button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
// 标记按钮A是否为白色，默认初始状态A白B黑
const isAWhite = ref(true)

// 动态计算按钮A的样式
const btnAStyle = computed(() => ({
  background: isAWhite.value ? '#ffffff' : '#000000',
  color: isAWhite.value ? '#000000' : '#ffffff',
  border: '1px solid #eee'
}))

// 动态计算按钮B的样式
const btnBStyle = computed(() => ({
  background: isAWhite.value ? '#000000' : '#ffffff',
  color: isAWhite.value ? '#ffffff' : '#000000',
  border: '1px solid #eee'
}))

// 点击事件：直接翻转状态即可完成颜色互换
const handleToggle = () => {
  isAWhite.value = !isAWhite.value
}
</script>

<style scoped>
.btn-wrap {
  padding: 2rem;
  display: flex;
  gap: 1rem;
}
.color-btn {
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}
</style>

精简优化写法（动态class绑定） #

如果不想写内联样式，也可以提前把黑白样式写到CSS类里，通过动态class绑定实现，连单独的点击方法都不需要，代码更易维护：

<template>
  <div class="btn-wrap">
    <button 
      class="color-btn"
      :class="isAWhite ? 'white-btn' : 'black-btn'"
      @click="isAWhite = !isAWhite"
    >
      按钮A
    </button>
    <button 
      class="color-btn"
      :class="isAWhite ? 'black-btn' : 'white-btn'"
      @click="isAWhite = !isAWhite"
    >
      按钮B
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 初始状态可自行修改，设为false则默认A黑B白
const isAWhite = ref(true)
</script>

<style scoped>
.btn-wrap {
  padding: 2rem;
  display: flex;
  gap: 1rem;
}
.color-btn {
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  border: 1px solid #eee;
}
.white-btn {
  background: #fff;
  color: #000;
}
.black-btn {
  background: #000;
  color: #fff;
}
</style>

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