vue项目实战 实现点击变色

在Vue.js项目实战中，实现点击变色通常是在HTML模板里通过绑定事件并修改元素样式来完成的。这里是一个简单的例子：

首先，在你的`template`部分，假设有一个按钮元素:

<button v-bind:class="{ active: isClicked }">点击变色</button>

然后，在`script`部分，创建一个Vue实例，并定义一个data属性`isClicked`初始值设为`false`，以及一个方法`toggleColor`来切换`isClicked`的状态：

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

接下来，你可以在`methods`的`toggleColor`方法中添加颜色变换的逻辑，比如改变按钮背景颜色：

toggleColor() {
  if (this.isClicked) {
    this.$el.style.backgroundColor = 'red'; // 点击后变为红色
  } else {
    this.$el.style.backgroundColor = ''; // 默认恢复原色或设置其他默认颜色
  }
}

现在，当用户点击按钮时，按钮的颜色会根据`isClicked`的状态变化。