vue js v-for循環顯示項目只有一次

Question

我希望在我的環形v-for div之間顯示一個箭頭，但不是最後一個。我如何在Vue JS中實現這一點？理想情況下，我會循環打破，而不是完全控制這個元素，但可能不得不使用css類型解決方案。

<div class="row"> 
    <div v-for="events in list.events" > 
     <div class="medium-4 columns" > 
      <div class="card"> 
       <img src="http://placehold.it/400x200"></br> 
       @{{events.title}} 
       @{{events.start}} - @{{events.end}} 
      </div> 
     </div> 
     <div class="medium-1 columns arrow" > 
      <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> 
     </div> 
    </div> 
</div> 

Answer 1

可以將$index值比較於所述陣列的長度：v-if="$index != (list.events.length - 1)"

<div class="row"> 
    <div v-for="events in list.events" > 
     <div class="medium-4 columns" > 
      <div class="card"> 
       <img src="http://placehold.it/400x200"></br> 
       @{{events.title}} 
       @{{events.start}} - @{{events.end}} 
      </div> 
     </div> 
     <div class="medium-1 columns arrow" v-if="$index != (list.events.length - 1)"> 
      <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> 
     </div> 
    </div> 
</div> 

爲CSS溶液，檢查出:last-of-type僞類：

.arrow:last-of-type{ 
    display:none; 
}