vue点击按钮变按钮背景颜色和字体颜色

在Vue.js中，你可以通过绑定事件处理函数并操作元素的样式来实现这个功能。当你点击按钮时，可以改变按钮的背景颜色和字体颜色。以下是一个简单的示例：

<template>
  <button @click="changeColor">点击我</button>
</template>

<script>
export default {
  data() {
    return {
      backgroundColor: 'blue', // 初始背景色
      textColor: 'white' // 初始字体色
    };
  },
  methods: {
    changeColor() {
      this.backgroundColor = this.backgroundColor === 'blue' ? 'red' : 'blue'; // 当前颜色反向切换
      this.textColor = this.textColor === 'white' ? 'black' : 'white'; // 当前颜色反向切换
    }
  }
}
</script>

<style scoped>
button {
  transition: background-color 0.5s, color 0.5s; // 添加过渡效果
}
</style>

在这个例子中，`@click="changeColor"`绑定了点击事件，当用户点击按钮时会触发`changeColor`方法。这个方法会改变`backgroundColor`和`textColor`的状态，并利用CSS的`:hover`伪类模拟按下状态时的颜色变化。

如果你想要实时反馈，还可以考虑使用`v-bind:class`来动态添加或移除类名，以便在CSS中直接定义不同的颜色。