Vue 3中的v-for指令使用详解
在Vue 3中,v-for
指令是一个非常强大且常用的指令,它用于在模板中循环渲染数组或对象的内容。本文将为您详细介绍Vue 3中v-for
指令的使用方法,并提供一些实例来帮助您更好地理解。
<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>