如何用v-bind实现按钮切换颜色和字体

你可以使用以下代码来实现按钮颜色和字体的切换：

<template>
  <div>
    <button :style="{ backgroundColor: bgColor, color: textColor }" @click="toggleColors">
      {{ buttonText }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgColor: "red",
      textColor: "white",
      buttonText: "Click me"
    };
  },
  methods: {
    toggleColors() {
      if (this.bgColor === "red") {
        this.bgColor = "blue";
        this.textColor = "black";
        this.buttonText = "Clicked!";
      } else {
        this.bgColor = "red";
        this.textColor = "white";
        this.buttonText = "Click me";
      }
    }
  }
};
</script>

在上面的代码中，我们使用了v-bind来动态绑定了按钮的背景颜色和文本颜色。我们还使用了@click指令来绑定按钮的点击事件，当用户点击按钮时，toggleColors方法会被调用来切换按钮的颜色和文本。