vue点击事件修改css样式

在 Vue 中，你可以使用 `v-bind:class` 来动态绑定 CSS 类。在点击事件中，可以通过修改 data 中的变量来动态改变绑定的 CSS 类。以下是一个例子：

<template>
  <div :class="{ active: isActive }" @click="toggleActive"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
.active {
  background-color: blue;
}
</style>

在上面的例子中，当 `isActive` 为 `true` 时，`active` 类会被绑定到 `div` 元素上，并且会使其背景颜色变为蓝色。在 `toggleActive` 方法中，我们通过修改 `isActive` 的值来切换 `active` 类的绑定状态，从而实现了点击事件修改 CSS 样式的效果。