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;
  }
相关推荐
燕落南枝1 天前
CSS 表单选择器与伪元素选择器详解
前端·css
狮子座的男孩2 天前
html+css基础:25、3D变换(3D空间与景深/透视点的位置/位移/旋转/缩放/多重变换/背部可见性)
css·经验分享·html·旋转·透视点·缩放/位移·3d变换/空间与景深
思码梁田2 天前
CSS 浏览器厂商前缀:从「写 5 遍」到现代自动化兼容
前端·css·css3·border-radius·1024程序员节·box-shadow·厂商前缀
feixing_fx3 天前
CSS Grid 入门:二维布局时代的降维打击
前端·css·前端框架·css3
2603_965896623 天前
CSS BEM 命名规范|组件化样式分层权威指南
前端·javascript·css
进击的明明3 天前
前端开发中的 BEM 国际命名规范:让 CSS 不再"打架"
前端·css·html
燕落南枝3 天前
CSS 分组选择器与链接伪类选择器详解
前端·css
溪语流沙3 天前
【每天一个CSS | Day33】聚焦即弹出的命令面板
前端·css·html5·组件·每日一练
燕落南枝3 天前
CSS 用户行为伪类::hover 与 :focus 详解
前端·css
钱栈up4 天前
前端改了三页、后端也动了,用户说「完全没变化」——我在 116 库上找到的三个真凶
css·数据库