在v-for循环中单独呈现选定的类,可以通过以下步骤实现:
下面是一个示例代码:
<template>
<div>
<div v-for="item in classes" :key="item.id" :class="{ 'selected': selectedClass === item.id }">
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
classes: [
{ id: 1, name: 'Class A' },
{ id: 2, name: 'Class B' },
{ id: 3, name: 'Class C' }
],
selectedClass: null
};
}
};
</script>
<style>
.selected {
background-color: yellow;
}
</style>
在上述示例中,v-for循环遍历classes数组,并使用:selectedClass === item.id判断是否为选定的类。当selectedClass的值与item.id相等时,对应的元素会应用selected类,从而实现单独呈现选定的类的效果。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云