tab切换动态添加class

在Vue 3中实现点击某一列表项以添加class，同时移除其他项的class，可以通过绑定一个动态class来实现。这里的关键是要有一种方式来跟踪哪一项是被选中的。通常，我们可以在数据对象中添加一个属性来表示当前选中的项。以下是一个基本的示例：

首先，在组件的<script setup>部分定义响应式数据和方法：

import { ref } from 'vue';

// 假设列表数据如下，可根据实际情况调整
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  // 更多项...
]);

// 当前选中项的id
const selectedId = ref(null);

// 点击项时的处理函数
const selectItem = (id) => {
  selectedId.value = id;
};

然后，在模板中使用v-for来循环渲染列表，并使用:class来绑定动态类。这里假设我们要添加的类名为selected：

<template>
  <ul>
    <li v-for="item in items" :key="item.id" :class="{ selected: item.id === selectedId }" @click="selectItem(item.id)">
      {{ item.name }}
    </li>
  </ul>
</template>

最后，确保在组件的<style>部分定义selected类的样式：

<style>
.selected {
  background-color: #f0f0f0; /* 示例样式，可根据需要自定义 */
}
</style>

这个简单的示例展示了如何在Vue 3中实现点击列表项以切换class的功能。当然，具体实现可能需要根据实际项目的需求进行调整。