Vue.js 点击时添加active类并移除之前的类

在本文中，我们将介绍如何在Vue.js中实现在点击时添加active类，并移除之前的类。

阅读更多：Vue.js 教程

添加active类的需求

在前端开发中，我们经常需要在用户点击某个元素时，给该元素添加一个active类，以改变其样式，以此来提示用户正在操作的元素。同时，为了不让页面堆积过多的active类，我们还需要在点击其他元素时，移除之前的active类。

Vue.js实现添加和移除active类的方法

Vue.js提供了多种方法来实现添加和移除active类的需求，下面将介绍其中两种常用的方法。

1. 使用v-bind:class指令

Vue.js中的v-bind:class指令可以动态绑定一个或多个类名。我们可以通过计算属性或方法来实现点击时添加或移除active类的操作。

首先，在Vue组件的模板中，我们可以使用v-bind:class指令，将一个对象作为参数来动态设置类名。在对象中，我们可以通过计算属性或方法来判断是否需要添加active类。以下是一个简单的示例：

<template>
  <div>
    <div :class="getClass(1)">Item 1</div>
    <div :class="getClass(2)">Item 2</div>
    <div :class="getClass(3)">Item 3</div>
  </div>
</template>

<script>
export default {
  methods: {
    getClass(itemIndex) {
      return {
        active: this.currentItem === itemIndex
      }
    }
  }
}
</script>

在上述示例中，我们通过getClass方法来判断是否需要添加active类。该方法接受一个参数itemIndex，表示当前元素的索引。当currentItem与当前元素索引一致时，返回一个包含”active”键的对象，否则返回一个空对象。

2. 使用动态类绑定

Vue.js还提供了另一种方法来动态绑定类名，即使用动态类绑定。在绑定类名时，我们可以利用Vue.js提供的动态绑定语法，在模板中直接编写表达式来设置类名。以下是一个示例：

<template>
  <div>
    <div :class="{ active: currentItem === 1 }">Item 1</div>
    <div :class="{ active: currentItem === 2 }">Item 2</div>
    <div :class="{ active: currentItem === 3 }">Item 3</div>
  </div>
</template>