Vue按钮点击变色，再点击恢复：简单实现方法 - 代码示例

<template>
  <button :class="{ active: isActive }" @click="toggleActive">按钮</button>
</template>
<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
};
</script>
<style>
.active {
  background-color: red;
}
</style>
<p>在上面的代码中，按钮的样式是通过<code>active</code>类来设置的。当<code>isActive</code>为<code>true</code>时，按钮会有<code>active</code>类，从而改变背景颜色。当按钮被点击时，<code>toggleActive</code>方法会将<code>isActive</code>的值切换为相反的值，实现按钮颜色的切换。</p>