Vue removes a certain style/class of the last group in the loop array

Vue removes a certain style/class of the last group in the loop array

Requirements: To achieve such an arrangement

status quo

It was found that the last grid was not aligned with the green line below.

In the end, it was found that because each grid was given margin-right：36px, it affected the last grid
, so the attribute of the last grid should be marginremoved

  <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;
  }