在Vue 3中,给循环列表中的选中项加样式可以通过使用v-bind或:class绑定来实现。你可以维护一个数据属性来记录选中的项,并根据这个属性来给不同的项添加特定的类名。
以下是一个简单的例子:
<template>
<div>
<ul>
<li
v-for="(item, index) in items"
:key="index"
:class="{ 'active': selectedItem === item }"
@click="selectItem(item)"
>
{{ item }}
</li>
</ul>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const items = ref(['Item 1', 'Item 2', 'Item 3']);
const selectedItem = ref(null);
function selectItem(item) {
selectedItem.value = item;
}
return {
items,
selectedItem,
selectItem
};
}
};
</script>
<style>
.active {
color: red;
}
</style>
在这个例子中,我们有一个循环的列表项items,每个列表项都可以被点击,点击后会调用selectItem方法,并将当前项设置为selectedItem。.active类包含了我们想要添加到选中项的样式。当selectedItem与当前循环项item相等时,active类就会被添加到该项的元素上。


















![[数据集][目标检测]文本表格检测数据集VOC+YOLO格式6688张5类别](https://i-blog.csdnimg.cn/direct/b51f88fe85364c2185dde74d1ba04f25.png)
