vue3如何实现点击循环内的某一项变颜色

在Vue 3中，Composition API 提供了一种更灵活和强大的方式来组织和重用逻辑。如果你想要实现点击循环内（例如使用v-for渲染的列表）的某一项来改变其颜色的功能，你可以通过维护一个响应式数组（或对象）来存储每个项目的状态（如是否被选中），并在点击事件处理函数中更新这个状态。

以下是一个简单的示例，展示了如何使用Vue 3的Composition API来实现这个功能：

<template>  
  <div>  
    <div  
      v-for="(item, index) in items"  
      :key="index"  
      :class="{'active': item.isActive}"  
      @click="toggleActive(index)"  
    >  
      {{ item.name }}  
    </div>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
  
export default {  
  name: 'ItemList',  
  setup() {  
    // 假设这是你的数据列表  
    const items = ref([  
      { name: 'Item 1', isActive: false },  
      { name: 'Item 2', isActive: false },  
      { name: 'Item 3', isActive: false },  
      // 可以根据需要添加更多项  
    ]);  
  
    // 一个方法来切换每个项目的isActive状态  
    function toggleActive(index) {  
      items.value[index].isActive = !items.value[index].isActive;  
    }  
  
    // 暴露给模板的数据和方法  
    return {  
      items,  
      toggleActive,  
    };  
  },  
};  
</script>  
  
<style>  
.active {  
  color: red; /* 当项目被激活时改变颜色 */  
}  
</style>

在这个例子中，items是一个响应式引用（通过ref创建），它包含了一个对象数组，每个对象代表列表中的一个项目，并且每个项目都有一个isActive属性，用于表示该项目是否被选中。toggleActive函数接受一个索引作为参数，并切换对应项目的isActive状态。在模板中，我们使用:class绑定来根据isActive的值动态添加或移除active类，这个类在<style>部分定义了被选中项目的样式（这里是改变文字颜色为红色）。

这样，每当用户点击列表中的某个项目时，该项目的颜色就会根据它是否被选中而改变。