如果您正在使用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><liv-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。
