在div上绑定 :class= { 名称（class/id）：a === key 值 } 并添加一个点击事件
声明const a = ref（0）； css写我们要的样式（就是我们绑定的class名称）文章来源：https://www.toymoban.com/news/detail-549173.html
点击事件里写 i.value = key值文章来源地址https://www.toymoban.com/news/detail-549173.html
<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>到了这里，关于Vue3 v-for点击切换样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
