Vuejs在v-for中,利用index來對(duì)第一項(xiàng)添加class的方法
（1）在v-for中，利用index來對(duì)第一項(xiàng)添加class
在CODE上查看代碼片派生到我的代碼片
<a class="list-group-item" :class="{'active':!index}" v-for="(i,index) in announcement">
index來源于v-for，i表示遍歷的數(shù)組的元素，index表示索引。
由于index從0開始，因此如果要指定第一項(xiàng)有active這個(gè)類，那么就用v-bind:class="{'active':!index}"
第一項(xiàng)原本是false（0），第二項(xiàng)和之后是true（>0），通過邏輯非操作符，讓其值反轉(zhuǎn)。
因此，第一項(xiàng)有active這個(gè)類，而后面的沒有。
如果除了第一項(xiàng)之外有某個(gè)類，也可以通過不加邏輯非操作符來達(dá)到。
類似的，可以用index==2這樣的表達(dá)式來讓第三項(xiàng)獲得這個(gè)類。
注意，我的版本是Vuejs2.0，因此貌似不能用$index來替換。
以上這篇Vuejs在v-for中,利用index來對(duì)第一項(xiàng)添加class的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue watch監(jiān)聽對(duì)象及對(duì)應(yīng)值的變化詳解
下面小編就為大家分享一篇vue watch監(jiān)聽對(duì)象及對(duì)應(yīng)值的變化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了詳解vue父子組件間傳值(props)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vue中style設(shè)置scoped后部分樣式不生效的解決
這篇文章主要介紹了vue中style設(shè)置scoped后部分樣式不生效的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
vue-cli3 項(xiàng)目從搭建優(yōu)化到docker部署的方法
這篇文章主要介紹了vue-cli3 項(xiàng)目從搭建優(yōu)化到docker部署的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
解決vue項(xiàng)目nginx部署到非根目錄下刷新空白的問題
今天小編就為大家分享一篇解決vue項(xiàng)目nginx部署到非根目錄下刷新空白的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue中使用v-if,v-else來設(shè)置css樣式的步驟
我們?cè)谑褂胿ue項(xiàng)目開發(fā)時(shí)，v-if是使用的非常多的，在這里我們談?wù)勅绾问褂胿-i來綁定修改css樣式，使用的主要是雙向數(shù)據(jù)綁定，即通過改變他的狀態(tài)來改變他的樣式，這篇文章主要介紹了vue中如何使用v-if,v-else來設(shè)置css樣式,需要的朋友可以參考下2023-03-03
vue @ ~ 相對(duì)路徑 路徑別名設(shè)置方式
這篇文章主要介紹了vue @ ~ 相對(duì)路徑 路徑別名設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue中如何使用xlsx讀取excel文件實(shí)例代碼
在Vue中使用xlsx庫(kù)可以幫助我們讀取和寫入Excel文件,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用xlsx讀取excel文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
使用Vue3新特性構(gòu)建動(dòng)態(tài)表單的方法詳解
傳統(tǒng)的表單開發(fā)通常需要編寫大量的重復(fù)代碼,例如處理用戶輸入、驗(yàn)證數(shù)據(jù)、更新 UI 等等,為了簡(jiǎn)化開發(fā),我們可以借助 Vue 3 的新特性,例如組合式 API 和 ref 對(duì)象,所以本文我們將一起學(xué)習(xí)如何使用 Vue 3 的新特性構(gòu)建一個(gè)更加靈活、可擴(kuò)展的動(dòng)態(tài)表單2024-06-06
vue3.2?reactive函數(shù)問題小結(jié)
reactive用來包裝一個(gè)對(duì)象，使其每個(gè)對(duì)象屬性都具有響應(yīng)性（也就是深層次響應(yīng)式），這篇文章主要介紹了vue3.2?reactive函數(shù)注意點(diǎn)及問題小結(jié),需要的朋友可以參考下2022-12-12