如果您正在使用Vue 3的<script setup>语法，可以按照以下步骤在Vue中使用class和下标来更改点击项的样式：
首先，在<script setup>部分导入所需的响应式API和定义需要使用的变量。
<script setup> import { ref } from 'vue'; const selectedItemIndex = ref(-1); // 初始值为-1表示没有选中任何项 const items = [/* your item data */]; // 你的选项数据 </script>
- 在模板中，使用
v-for指令遍历渲染所有的选项，并为每个选项绑定点击事件和类名。
<template> <ul> <li v-for="(item, index) in items" :key="index" :class="{ active: index === selectedItemIndex.value }" @click="selectItem(index)" > {{ item }} </li> </ul> </template>
在上述代码中，我们使用:class绑定了一个对象，当index等于selectedItemIndex.value时，给该选项添加active类名，用于显示选中状态。同时，我们绑定了点击事件@click，当用户点击某个选项时，会调用selectItem方法来更新selectedItemIndex的值。
继续在<script setup>部分定义selectItem函数来更新selectedItemIndex的值。
<script setup> import { ref } from 'vue'; const selectedItemIndex = ref(-1); // 初始值为-1表示没有选中任何项 const items = [/* your item data */]; // 你的选项数据 const selectItem = (index) => { selectedItemIndex.value = index; }; </script>
上述代码中的selectItem函数会接收被点击选项的下标作为参数，并将其赋值给selectedItemIndex，从而实现选中项样式的更改。
最后，您可以在样式表中定义.active类名来设置选中项的样式。
<style scoped> .active { /* 设置选中项的样式 */ } </style>
通过上述步骤，在Vue使用<script setup>语法中，您可以使用class和下标来更改点击项的样式。当用户点击某个选项时，该选项会添加.active类名，从而可以应用特定的样式来表示选中状态。请注意，由于<script setup>语法中的变量引用需要使用.value，因此在模板中访问selectedItemIndex时，需要使用selectedItemIndex.value。
