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 小时前
【期末网页设计作业】HTML+CSS+JS 旅行社网站、旅游主题设计与实现(附源码)
javascript·css·html·课程设计·期末网页设计
q***581918 小时前
【HTML+CSS】使用HTML与后端技术连接数据库
css·数据库·html
振华OPPO1 天前
Vue:“onMounted“ is defined but never used no-unused-vars
前端·javascript·css·vue.js·前端框架
J***Q2921 天前
前端CSS架构模式,BEM与ITCSS
前端·css
qq_398586542 天前
浏览器中内嵌一个浏览器
前端·javascript·css·css3
一个打工仔的笔记3 天前
使用css实现打开抽屉效果(css过渡动画)
css
fruge3 天前
设计稿还原技巧:解决间距、阴影、字体适配的细节问题
前端·css
kuilaurence3 天前
CSS `border-image` 给文字加可拉伸边框
前端·css
xiangxiongfly9153 天前
CSS link标签
前端·css