当前位置：首页 > VUE

vue实现点击增加class

2026-01-21 03:34:58VUE

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

在 Vue 中可以通过 v-bind:class（或简写为 :class）动态绑定类名。结合点击事件，可以实现点击时添加或移除类名。

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

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

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

使用数组语法绑定多个类名

如果需要同时绑定多个类名，可以使用数组语法。通过点击事件修改数组中的类名。

<template>
  <div 
    :class="classList" 
    @click="toggleClass"
  >
    点击切换多个类名
  </div>
</template>

<script>
export default {
  data() {
    return {
      classList: ['class1', 'class2']
    }
  },
  methods: {
    toggleClass() {
      if (this.classList.includes('active')) {
        this.classList = this.classList.filter(item => item !== 'active');
      } else {
        this.classList.push('active');
      }
    }
  }
}
</script>

使用计算属性动态生成类名

对于更复杂的类名逻辑，可以使用计算属性动态生成类名对象或数组。

<template>
  <div 
    :class="computedClass" 
    @click="toggleActive"
  >
    点击切换计算属性生成的类名
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      isError: false
    }
  },
  computed: {
    computedClass() {
      return {
        active: this.isActive,
        'text-danger': this.isError,
        'bg-highlight': this.isActive && !this.isError
      };
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
}
</script>

在列表渲染中为特定项添加类名

在 v-for 循环中，可以为特定项添加类名。

<template>
  <ul>
    <li 
      v-for="(item, index) in items" 
      :key="index"
      :class="{ 'active': activeIndex === index }"
      @click="activeIndex = index"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      activeIndex: -1
    }
  }
}
</script>

使用事件对象获取当前元素

通过事件对象 $event 可以直接操作 DOM 元素添加类名，但不推荐这种方式，应该优先使用 Vue 的数据驱动方式。

<template>
  <div @click="addClass($event)">
    点击通过事件对象添加类名
  </div>
</template>

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

以上方法都可以实现点击添加 class 的效果，推荐使用数据驱动的方式（前三种方法）而不是直接操作 DOM。

vue实现点击增加class