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;
  }
相关推荐
-代号95273 小时前
【JavaScript】十四、轮播图
javascript·css·css3
随笔记5 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
前端Hardy5 小时前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html
前端Hardy5 小时前
HTML&CSS:你绝对没见过的input输入框,确定不看看吗
javascript·css·html
前端Hardy6 小时前
HTML&CSS:不一样的开关效果
javascript·css·html
大林i瑶9 小时前
svg按钮渐变边框
css·svg
前端菜鸟日常11 小时前
HMTL+JS+CSS实现贪吃蛇游戏,包含有一般模式,困难模式,还有无敌模式
javascript·css·游戏
Yolo@~19 小时前
个人网站:基于html、css、js网页开发界面
javascript·css·html
星空寻流年1 天前
css之定位学习
前端·css·学习
DarkBule_1 天前
零基础驯服GitHub Pages
css·学习·html·github·html5·web