1. 程式人生 > >Vuejs在v-for中,利用index來對第一項新增class的方法

Vuejs在v-for中,利用index來對第一項新增class的方法

1.為li列表首項新增選中樣式:

<li v-for="(items,index) in currentImgList" class="imgLiClass" :class="{'active': !index}"></li>

或者

<li v-for="(items,index) in currentImgList" class="imgLiClass" :class="{'active': index==0}"></li>

由於index從0開始,因此如果要指定第一項有active這個類,那麼就用v-bind:class="{'active':!index}"

第一項原本是false(0),第二項和之後是true(>0),通過邏輯非操作符,讓其值反轉。

2.為li列表第二項新增選中樣式:

<li v-for="(items,index) in currentImgList" class="imgLiClass" :class="{'active': index==1}"></li>

 

本文來自 https://www.jb51.net/article/135826.htm