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;
  }
相关推荐
卡尔特斯13 小时前
CSS 特殊符号 / 英文导致换行问题速查表
css
Komorebi゛13 小时前
【CSS】斜角流光样式
前端·css
Irene199113 小时前
CSS 废弃属性分类总结
前端·css
San30.19 小时前
告别全局污染:深入解析现代前端的模块化 CSS 演进之路
前端·css·vue.js·react.js
23级二本计科20 小时前
前端 HTML + CSS + JavaScript
前端·css·html
xuedaobian20 小时前
Markdown 宽表格突破容器边界滚动方案
前端·css
AI前端老薛21 小时前
CSS实现动画的几种方式
前端·css
San3021 小时前
告别全局污染:深入解析现代前端的模块化 CSS 演进之路
css·vue.js·react.js
程序员小李白21 小时前
定位.轮播图详细解析
前端·css·html
码客前端1 天前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3