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

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