溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Vuejs在v-for中如何使用index來(lái)對(duì)第一項(xiàng)添加class，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
（1）在v-for中，利用index來(lái)對(duì)第一項(xiàng)添加class
在CODE上查看代碼片派生到我的代碼片
<a class="list-group-item" :class="{'active':!index}" v-for="(i,index) in announcement">index來(lái)源于v-for，i表示遍歷的數(shù)組的元素，index表示索引。
由于index從0開(kāi)始，因此如果要指定第一項(xiàng)有active這個(gè)類(lèi)，那么就用v-bind:class="{'active':!index}"
第一項(xiàng)原本是false（0），第二項(xiàng)和之后是true（>0），通過(guò)邏輯非操作符，讓其值反轉(zhuǎn)。
因此，第一項(xiàng)有active這個(gè)類(lèi)，而后面的沒(méi)有。
如果除了第一項(xiàng)之外有某個(gè)類(lèi)，也可以通過(guò)不加邏輯非操作符來(lái)達(dá)到。
類(lèi)似的，可以用index==2這樣的表達(dá)式來(lái)讓第三項(xiàng)獲得這個(gè)類(lèi)。
注意，我的版本是Vuejs2.0，因此貌似不能用$index來(lái)替換。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vuejs在v-for中如何使用index來(lái)對(duì)第一項(xiàng)添加class”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼