Vue3 v-for点击切换样式

在div上绑定  :class= { 名称（class/id）：a === key 值 }  并添加一个点击事件

声明const  a  = ref（0）；  css写我们要的样式（就是我们绑定的class名称）

点击事件里写   i.value = key值

直接来代码：

<template>
  <div>
    <p
      v-for="arr in arr"
      :key="arr.id"
      :class="{ blue: i === arr.id }"
      @click="aa(arr.id)"
    >
      {{ arr.name }}
    </p>
  </div>
</template>
 
<script>
import { ref } from "vue";
export default {
  setup() {
    const arr = ref([
      {
        id: 1,
        name: "张三",
      },
      {
        id: 2,
        name: "李四",
      },
      {
        id: 3,
        name: "王五",
      },
    ]);
    const i = ref(1);
 
    const aa = (arr) => {
      i.value = arr;
    };
    return {
      arr,
      aa,
      i,
    };
  },
};
</script>
<style>
.blue {
  color: #2979ff;
}
</style>