Vue3 v-for点击切换样式

<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 setup>
import { ref } from "vue";
    const arr = ref([
      {
        id: 1,
        name: "张三",
      },
      {
        id: 2,
        name: "李四",
      },
      {
        id: 3,
        name: "王五",
      },
    ]);
    const i = ref(1);
    const aa = (arr) => {
      i.value = arr;
    };
</script>
<style>
.blue {
  color: #2979ff;
}
</style>