Vuejs在v-for中,利用index来对第一项添加class

本文介绍如何在 Vue.js 的 v-for 循环中利用 index 来为列表的第一项添加 active 类,实现样式高亮显示。示例展示了如何通过 !index 的条件判断来仅对首个元素应用特定样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[html]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. <a class="list-group-item" :class="{'active':!index}" v-for="(i,index) in announcement">  

index来源于v-for,i表示遍历的数组的元素,index表示索引。

 

由于index从0开始,因此如果要指定第一项有active这个类,那么就用v-bind:class="{'active':!index}"

 

第一项原本是false(0),第二项和之后是true(>0),通过逻辑非操作符,让其值反转。

 

因此,第一项有active这个类,而后面的没有。

 

如果除了第一项之外有某个类,也可以通过不加逻辑非操作符来达到。

 

类似的,可以用index==2这样的表达式来让第三项获得这个类。

 

注意,我的版本是Vuejs2.0,因此貌似不能用$index来替换。

<template> <div class="label-container"> <div style="border: 1px solid #d9d9d9"></div> <div class="header"> <div class="biaoqian">客户特征标签</div> <el-popover placement="right" popper-class="group-popover" width="287" trigger="click"> <div class="full-label-section"> <span>业务需求</span> <div class="full-tag-group"> <el-popover v-for="(item, index) in requireList" :key="index" placement="top-start" popper-class="grid-popover" trigger="hover" :content="item.labelName" v-if="shouldShowPopover(item)" > <el-tag slot="reference" size="mini" class="truncate-tag" >{{ item.labelName }}</el-tag> </el-popover> <el-tag v-for="(item, index) in requireList" v-if="!shouldShowPopover(item)" :key="index" size="mini" >{{ item.labelName }}</el-tag> </div> </div> <div class="full-label-section"> <span>业务特征</span> <div class="full-tag-group"> <el-popover v-for="(item, index) in featureList" :key="index" placement="top-start" popper-class="grid-popover" trigger="hover" :content="item.labelName" v-if="shouldShowPopover(item)" > <el-tag slot="reference" type="" size="mini" class="truncate-tag" >{{ item.labelName }}</el-tag> </el-popover> <el-tag v-for="(item, index) in featureList" v-if="!shouldShowPopover(item)" :key="index" type="success" size="mini" >{{ item.labelName }}</el-tag> </div> </div> <div class="full-label-section full-label-sections"> <span>拓展任务</span> <div class="full-tag-group"> <el-popover v-for="(item, index) in taskList" :key="index" placement="top-start" popper-class="grid-popover" trigger="hover" :content="item.labelName" v-if="shouldShowPopover(item)" > <el-tag slot="reference" type="danger" size="mini" class="truncate-tag" >{{ item.labelName }}</el-tag> </el-popover> <el-tag v-for="(item, index) in taskList" v-if="!shouldShowPopover(item)" :key="index" type="danger" size="mini" >{{ item.labelName }}</el-tag> </div> </div> <el-button slot="reference" class="btn">更多</el-button> </el-popover> </div> <!-- 客户特征部分标签 --> <div style="padding: 10px; background: #fafafa"> <div class="label-section"> <span>业务需求</span> <div class="tag-group"> <el-popover v-for="(item, index) in showRequireList" :key="index" placement="top-start" popper-class="grid-popover" trigger="hover" :content="item.labelName" v-if="shouldShowPopover(item)" > <el-tag slot="reference" size="mini" class="truncate-tag" >{{ item.labelName }}</el-tag> </el-popover> <el-tag v-for="(item, index) in showRequireList" v-if="!shouldShowPopover(item)" :key="index" size="mini" >{{ item.labelName }}</el-tag> </div> </div> <div class="label-section"> <span>业务特征</span> <div class="tag-group"> <el-popover v-for="(item, index) in showFeatureList" :key="index" placement="top-start" popper-class="grid-popover" trigger="hover" :content="item.labelName" v-if="shouldShowPopover(item)" > <el-tag slot="reference" type="success" size="mini" class="truncate-tag" >{{ item.labelName }}</el-tag> </el-popover> <el-tag v-for="(item, index) in showFeatureList" v-if="!shouldShowPopover(item)" :key="index" type="success" size="mini" >{{ item.labelName }}</el-tag> </div> </div> <div class="label-section"> <span>拓展任务</span> <div class="tag-group"> <el-popover v-for="(item, index) in showTaskList" :key="index" placement="top-start" popper-class="grid-popover" trigger="hover" :content="item.labelName" v-if="shouldShowPopover(item)" > <el-tag slot="reference" type="danger" size="mini" class="truncate-tag" >{{ item.labelName }}</el-tag> </el-popover> <el-tag v-for="(item, index) in showTaskList" v-if="!shouldShowPopover(item)" :key="index" type="danger" size="mini" >{{ item.labelName }}</el-tag> </div> </div> </div> </div> </template> <script> import { Tag, Button, Popover,Tooltip } from 'element-ui'; export default { name: 'groupLabelBox', components: { [Tag.name]: Tag, [Button.name]: Button, [Popover.name]: Popover, [Tooltip.name]: Tooltip, }, props: { requireList: { type: Array, required: true, }, featureList: { type: Array, required: true, }, taskList: { type: Array, required: true, }, }, data() { return { dialogVisible: false, }; }, computed: { showRequireList() { return this.requireList.slice(0, 2); }, showFeatureList() { return this.featureList.slice(0, 2); }, showTaskList() { return this.taskList.slice(0, 2); }, }, methods: { shouldShowPopover(item) { return item?.labelName?.length >= 7 }, }, }; </script> <style lang="less" scoped> .group-popover { padding: 30px !important; /* 标题样式 */ .full-label-section{ padding-bottom: 12px; > span { display: block; margin-bottom: 10px; width: 56px; height: 14px; font-family: PingFangSC, PingFang SC, sans-serif; font-weight: 400; font-size: 14px; color: #888888; line-height: 14px; text-align: left; font-style: normal; } } /* 标签组样式 */ .full-tag-group { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; .el-tag { margin: 0 !important; border-radius: 4px; font-size: 12px; padding: 0 8px; height: 24px; line-height: 24px; } } .full-label-sections { padding-bottom: 0 !important; } } .truncate-tag { display: inline-block; max-width: 112px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; cursor: default; } .truncate-tag:hover:after { position: absolute; top: 30px; left: 10px; content: attr(data-title); color: #333333; } .grid-popover { min-width: 54px; text-align: center; padding: 10px 10px; } .label-container { position: relative; padding: 0px 14px 7px 16px; } .header { display: flex; justify-content: space-between; align-items: center; margin: 10px 0px; .biaoqian { width: 84px; height: 14px; font-family: PingFangSC, PingFang SC, sans-serif; font-weight: 400; font-size: 14px; color: #888888; line-height: 14px; text-align: left; font-style: normal; } .btn { width: 33px; height: 17px; padding: 0 4px; background: #ffffff; border-radius: 2px; border: 1px solid #cbcbcb; font-weight: 400; font-size: 12px; color: #333333; line-height: 17px; font-style: normal; > span { display: block; width: fit-content; } } } .label-section { > span { display: block; margin-bottom: 5px; width: 48px; height: 14px; font-family: PingFangSC, PingFang SC, sans-serif; font-weight: 400; font-size: 12px; color: #333333; line-height: 14px; text-align: left; font-style: normal; } } .tag-group { display: flex; gap: 10px; flex-wrap: wrap; } .label-section:not(:last-child) { margin-bottom: 10px; } </style> 优化这段代码
最新发布
07-13
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值