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値を比較することができます、CSSのソリューションについて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> 

:last-of-type疑似クラスをチェックアウト：

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