vue两个按钮点击切换按钮背景色和字体颜色

在Vue.js中，你可以创建一个组件，其中包含两个按钮，并通过绑定事件监听器和计算属性来实现点击时切换背景色和字体颜色的功能。以下是一个简单的示例：

<template>
  <div class="button-container">
    <button @click="changeColor('bg-color-1', 'font-color-1')">Button 1</button>
    <button @click="changeColor('bg-color-2', 'font-color-2')">Button 2</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgColor1: 'blue', // 初始化第一个按钮的背景色
      fontColor1: 'white', // 初始化第一个按钮的字体色
      bgColor2: 'red', // 初始化第二个按钮的背景色
      fontColor2: 'black', // 初始化第二个按钮的字体色
    };
  },
  methods: {
    changeColor(currentBg, currentFont) {
      const otherBg = this[currentBg === 'bg-color-1' ? 'bgColor2' : 'bgColor1'];
      const otherFont = this[currentFont === 'font-color-1' ? 'fontColor2' : 'fontColor1'];

      this[currentBg] = otherBg;
      this[currentFont] = otherFont; // 可能需要将颜色值转换成对应的CSS样式如：'#000000'
    },
  },
};
</script>

<style scoped>
.button-container button {
  transition: background-color 0.3s, color 0.3s;
}
</style>

在这个例子中，`changeColor`方法接收当前被点击按钮的颜色键（`bg-color-1` 或 `font-color-1`），然后切换到另一个颜色。`transition`属性用于平滑地改变颜色。