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;
  }
相关推荐
石金龙21 小时前
[译] Composition in CSS
前端·css
天天扭码21 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153171 天前
CSS特异性:如何精准控制样式而不失控?
前端·css
会豪1 天前
CSS 动画属性精讲:从基础到实战
前端·css
前端Hardy2 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy2 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
墨渊君2 天前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
小帆聊前端2 天前
Flex 布局实战指南:从踩坑到精通,解决 90% 布局难题
css
谢尔登2 天前
【CSS】层叠上下文和z-index
前端·css
Alice-YUE2 天前
【CSS学习笔记3】css特性
前端·css·笔记·html