Vuejs（14）——在v-for中，利用index來對第一項添加class

版權聲明：出處http://blog.csdn.net/qq20004604

（1）在v-for中，利用index來對第一項添加class

 

<a class="list-group-item" :class="{'active':!index}" v-for="(i,index) in announcement">

 

index來源於v-for，i表示遍歷的數組的元素，index表示索引。

 

因爲index從0開始，所以若是要指定第一項有active這個類，那麼就用v-bind:class="{'active':!index}"

 

第一項本來是false（0），第二項和以後是true（>0），經過邏輯非操做符，讓其值反轉。

 

所以，第一項有active這個類，然後面的沒有。

 

若是除了第一項以外有某個類，也能夠經過不加邏輯非操做符來達到。

 

相似的，能夠用index==2這樣的表達式來讓第三項得到這個類。

 

注意，個人版本是Vuejs2.0，所以貌似不能用$index來替換。