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;
  }
相关推荐
霍理迪24 分钟前
HTML常用行内标签
css·html·html5
低保和光头哪个先来38 分钟前
CSS+JS实现单例老虎机切换图片动画
前端·javascript·css
方圆工作室1 小时前
纯HTML/CSS健康数据分析平台
css·数据分析·html
小明记账簿1 小时前
CSS mix-blend-mode 实现元素融合效果
前端·css
C+++Python10 小时前
如何使用CSS Grid?
css
Henry_Lau61712 小时前
主流IDE常用快捷键对照
前端·css·ide
C+++Python12 小时前
CSS Grid和Flexbox有什么区别?
css
请叫我聪明鸭17 小时前
CSS实现单行、多行文本超长显示 / 不超长隐藏、悬浮窗超长展示/不超长隐藏、悬浮窗手动控制样式
前端·javascript·css
码云之上18 小时前
WEB端小屏切换纯CSS实现
前端·css
苏打水com19 小时前
第十五篇:Day43-45 前端性能优化进阶——从“可用”到“极致”(对标职场“高并发场景优化”需求)
前端·css·vue·html·js