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