在Vue中实现列表点击添加class active的功能，主要涉及到动态绑定class的方法。以下是几种实现方式：

1. 使用v-for循环并结合v-bind:class

当你有一个列表，并希望点击某个列表项时，为其添加active类，可以在data中设置一个变量来存储当前激活项的索引或标识，然后通过比较这个值来动态绑定class。

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

<script>
export default {
  data() {
    return {
      list: ["标题一", "标题二", "标题三"],
      isActive: 0, // 初始化第一个标题为active
    };
  },
  methods: {
    changeClass(index) {
      this.isActive = index;
    },
  },
};
</script>

<style>
.active {
  color: red;
}
</style>

2. 非循环情况下动态添加

如果不是在循环中，而是单独的几个元素，可以为每个元素设置不同的标识，并在点击时更新isActive的值为对应的标识。

<template>
  <div>
    <div :class="{ active: isActive === 1 }" @click="changeClass(1)">内容一</div>
    <div :class="{ active: isActive === 2 }" @click="changeClass(2)">内容二</div>
    <div :class="{ active: isActive === 3 }" @click="changeClass(3)">内容三</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: 1,
    };
  },
  methods: {
    changeClass(index) {
      this.isActive = index;
    },
  },
};
</script>

3. 利用Vue Router的linkActiveClass属性

如果是在Vue Router中，可以利用router-link组件的linkActiveClass属性来自动为当前激活的路由链接添加active类。

<router-link to="/path" class="menu-item" active-class="active">链接</router-link>

在这种情况下，当用户访问对应的路径时，router-link会自动添加active类。

通过上述方法，你可以根据实际需求选择合适的方式来实现点击列表项添加active类的功能。

项目应用

以5G工业区数据大屏项目为例，在年份切换的时候，就是通过点击div，然后给对应的div增加一个active class从而达到选中高亮的效果。