当前位置：首页 > VUE

vue实现点击添加class

2026-01-23 06:39:38VUE

在 Vue 中实现点击添加 class 的方法

使用 `v-bind:class` 绑定动态 class

通过 v-bind:class 绑定一个对象，根据条件动态切换 class。结合点击事件修改条件状态。

<template>
  <div 
    :class="{ 'active-class': isActive }" 
    @click="isActive = !isActive"
  >
    点击切换 class
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  }
}
</script>

<style>
.active-class {
  background-color: #f00;
}
</style>

使用数组语法绑定多个 class

通过数组语法绑定多个 class，动态控制其中一个或多个 class 的显示。

<template>
  <div 
    :class="['base-class', { 'active-class': isActive }]" 
    @click="isActive = !isActive"
  >
    点击切换 class
  </div>
</template>

使用计算属性管理复杂逻辑

当 class 逻辑较复杂时，可通过计算属性返回动态 class 对象或数组。

<template>
  <div 
    :class="computedClass" 
    @click="toggleActive"
  >
    点击切换 class
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      isError: false
    }
  },
  computed: {
    computedClass() {
      return {
        'active-class': this.isActive,
        'error-class': this.isError
      }
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive
    }
  }
}
</script>

使用 Vue 3 的 `setup` 语法（Composition API）

在 Vue 3 中，可通过 ref 或 reactive 管理状态，实现同样的功能。

<template>
  <div 
    :class="{ 'active-class': isActive }" 
    @click="toggleActive"
  >
    点击切换 class
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const isActive = ref(false)

    const toggleActive = () => {
      isActive.value = !isActive.value
    }

    return {
      isActive,
      toggleActive
    }
  }
}
</script>

通过事件参数 `$event` 操作目标元素

直接操作 DOM 元素的 classList，适用于非响应式场景或临时需求。

<template>
  <div @click="addClass($event)">
    点击添加 class
  </div>
</template>

<script>
export default {
  methods: {
    addClass(event) {
      event.target.classList.add('active-class')
    }
  }
}
</script>