Vue.js 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>
<p>在上面的代码中，我们使用了 <code>v-bind</code> 来动态绑定了按钮的背景颜色和文本颜色。我们还使用了 <code>@click</code> 指令来绑定按钮的点击事件，当用户点击按钮时，<code>toggleColors</code> 方法会被调用来切换按钮的颜色和文本。</p>