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;
  }
相关推荐
招风的黑耳5 小时前
Axure移动端选择器案例:多类型选择器设计与动态效果实现
移动端·选择器·拨盘选择器·联动选择器
@大迁世界11 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说11 小时前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
拜无忧12 小时前
前端,用SVG 模仿毛笔写字绘画,defs,filter
前端·css·svg
代码小学僧14 小时前
🎉 在 Tailwind 中愉快的使用 Antd Design 色彩
前端·css·react.js
ssshooter14 小时前
复习 CSS Flex 和 Grid 布局
前端·css·html
菲兹园长15 小时前
CSS(展示效果)
前端·javascript·css
UNbuff_016 小时前
HTML 中的 CSS 使用说明
css·html·tensorflow
很多石头18 小时前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
华仔啊20 小时前
关于移动端100vh的坑和终极解决方案,看这一篇就够了!
前端·css