vue去掉循环数组中的最后一组的某个样式style/class

vue去掉循环数组中的最后一组的某个样式style/class

需求:要实现这样的排列

现状

发现,最后一个格子并没有跟下面绿色线对齐。

最后发现 是因为 每个格子都给了 margin-right:36px,影响到了最后一个格子

所以要 将最后一个格子的margin 属性去掉

html 复制代码
  <div v-for="(item, index) in exportData.slice(3, 8)" :key="index">
      <div class="devicePart rectImg defaultrectImg"
:class="index === exportData.slice(3, 8).length - 1 ? '' : 'murightPart'">
        <div class="deviceTitle">{{ item.name.slice(0, 2) }}</div>
           <div class="deviceTitle">{{ item.name.slice(2, 5) }}</div>
       </div>
     </div>
 </div>

css

css 复制代码
 .muPart {
    display: flex;
  }

  .murightPart {
    margin-right: 36px;
  }
相关推荐
秋天爱美丽6 小时前
css实现圆角+边框渐变+背景半透明
前端·css
XboxYan10 小时前
借助CSS实现自适应屏幕边缘的tooltip
前端·css
艾小码11 小时前
CSS粘性定位失效?深度解析 position: sticky 的陷阱与解决方案
前端·css
cos12 小时前
FE Bits Vol.3|CSS attr() 类型化进化,PostCSS 复盘 12 年
前端·css·aigc
全宝12 小时前
【前端特效系列】css+js实现聚光灯效果
javascript·css·html
rannn_1111 天前
【Javaweb学习|黑马笔记|Day1】初识,入门网页,HTML-CSS|常见的标签和样式|标题排版和样式、正文排版和样式
css·后端·学习·html·javaweb
小离a_a1 天前
使用原生css实现word目录样式,标题后面的...动态长度并始终在标题后方(生成点线)
前端·css
郭优秀的笔记1 天前
抽奖程序web程序
前端·css·css3
布兰妮甜1 天前
CSS Houdini 与 React 19 调度器:打造极致流畅的网页体验
前端·css·react.js·houdini
小小愿望1 天前
移动端浏览器中设置 100vh 却出现滚动条?
前端·javascript·css