vue 给循环列表的选中项加样式

在Vue 3中，给循环列表中的选中项加样式可以通过使用v-bind或:class绑定来实现。你可以维护一个数据属性来记录选中的项，并根据这个属性来给不同的项添加特定的类名。

以下是一个简单的例子：

<template><div><ul><liv-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类就会被添加到该项的元素上。