Vue.js 点击事件改变元素颜色：完整指南和示例

在 Vue.js 中，可以通过绑定点击事件来改变元素的颜色。首先，在 Vue 实例中定义一个 data 属性来保存元素的颜色状态，例如：

data() {
  return {
    color: 'red'
  }
}

然后，在模板中使用 v-bind 指令将 color 属性绑定到元素的颜色属性上，例如：

<div :style="{ backgroundColor: color }"></div>

最后，在元素上添加一个点击事件处理函数，例如：

<div @click="changeColor"></div>

在 Vue 实例中定义 changeColor 方法来改变颜色，例如：

methods: {
  changeColor() {
    this.color = 'blue';
  }
}

这样，当点击元素时，会触发 changeColor 方法，从而改变元素的颜色为蓝色。

完整的例子如下所示：

<template>
  <div>
    <div :style="{ backgroundColor: color }"></div>
    <button @click="changeColor">Change Color</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  },
  methods: {
    changeColor() {
      this.color = 'blue';
    }
  }
}
</script>

<style scoped>
div {
  width: 100px;
  height: 100px;
}
</style>