vue去掉循环数组中的最后一组的某个样式style/class

vue去掉循环数组中的最后一组的某个样式style/class

需求:要实现这样的排列

vue去掉循环数组中的最后一组的某个样式style/class_第1张图片

现状

vue去掉循环数组中的最后一组的某个样式style/class_第2张图片

发现,最后一个格子并没有跟下面绿色线对齐。

最后发现 是因为 每个格子都给了 margin-right:36px,影响到了最后一个格子
所以要 将最后一个格子的margin 属性去掉

  <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

 .muPart {
    display: flex;
  }

  .murightPart {
    margin-right: 36px;
  }

你可能感兴趣的:(css,last-child不生效,选择器)