vue点击变色再点击还原

在Vue.js中，实现点击元素变色然后再恢复原色的功能通常通过v-bind:class指令结合事件处理来完成。首先，你需要定义两个CSS类，一个用于选中状态（例如`.active`），另一个用于普通状态（例如`.inactive`）。然后在模板中绑定这两个类到一个布尔值上，这个布尔值会在点击事件触发时切换。

HTML部分：

<button @click="toggleColor" :class="{ active: isColorActive, inactive: !isColorActive }">点击变色</button>

JS部分 (假设你在data里有一个isColorActive初始值为false):

export default {
  data() {
    return {
      isColorActive: false,
    };
  },
  methods: {
    toggleColor() {
      this.isColorActive = !this.isColorActive;
    },
  },
};

当用户第一次点击按钮，`isColorActive`变为`true`，按钮会显示为选中颜色；再次点击会使`isColorActive`变为`false`，恢复到原来的颜色。