在Vue 3中，v-for指令是一个非常强大且常用的指令，它用于在模板中循环渲染数组或对象的内容。本文将为您详细介绍Vue 3中v-for指令的使用方法，并提供一些实例来帮助您更好地理解。
html
<div
:class="{'indicator-category': true ,'indicator-category-active': item.checked}"
v-for="item in sideList" :key="item.id" @click="categoryClick(item)"
>
{{item.name}}
</div>
<script setup lang="ts">
const sideList = ref([
{
id: 1,
name : '基本信息',
},
{
id: 2,
name : '财务流水',
}
,
{
id: 3,
name : '展现数据',
}
,
{
id: 4,
name : '转化数据',
}
,
{
id: 5,
name : '转化数据(计费时间)',
}
,
{
id: 6,
name : ' APP下载数据',
}
,
{
id: 7,
name : '视频数据',
},
{
id: 8,
name : '落地页及门店数据',
}
,
{
id: 9,
name : '附加创意',
}
,
{
id: 10,
name : '互动数据',
}
,
{
id: 11,
name : ' 直播间数据',
}
,
{
id: 12,
name : '游戏行业',
}
,
{
id: 13,
name : '线索收集',
}
])
const categoryClick = (item) =>{
sideList.value.forEach(el => el.checked= false)
item.checked = !item.checked
}
</script> 