vue点击按钮切换颜色

你可以使用 Vue 的指令 `v-bind:class` 来动态绑定 CSS 类。例如，当按钮被点击时，可以切换一个 CSS 类来改变按钮的颜色。

HTML:

<button v-on:click="changeColor" v-bind:class="{ 'red': isRed }">Change Color</button>

Vue:

new Vue({
  el: '#app',
  data: {
    isRed: false
  },
  methods: {
    changeColor: function() {
      this.isRed = !this.isRed;
    }
  }
});

CSS:

.red {
  background-color: red;
  color: white;
}

现在，当用户点击按钮时，`changeColor` 方法将会在 Vue 实例中被调用，该方法将会切换 `isRed` 数据属性的值。由于 `v-bind:class` 指令绑定了 `red` 类，因此按钮的背景颜色和文本颜色将会被改变。