快捷導(dǎo)航

在vue中給列表中的奇數(shù)行添加class的實(shí)現(xiàn)方法

更新時(shí)間：2018年09月05日 10:13:33 作者：西風(fēng)XF

今天小編就為大家分享一篇在vue中給列表中的奇數(shù)行添加class的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

---------筆記---------

實(shí)現(xiàn)效果：給列表中的奇數(shù)或偶數(shù)添加class

//奇數(shù)行
<ul>
 <li class="list-item" v-for="(item,index) in data" :class="{'active':index%2 != 1}">{{data[index].name}}</li>
</ul>

奇數(shù)行：:class="{'active':index%2 != 1}"

偶數(shù)行：:class="{'active':index%2 != 0}"

active是需要添加的class

以上這篇在vue中給列表中的奇數(shù)行添加class的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

手把手教你Vue3實(shí)現(xiàn)路由跳轉(zhuǎn)
Vue Router是Vue.js的官方路由器,它與Vue.js核心深度集成,使使用Vue.js構(gòu)建單頁(yè)應(yīng)用程序變得輕而易舉,下面這篇文章主要給大家介紹了關(guān)于Vue3實(shí)現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,需要的朋友可以參考下
2022-08-08
Vue3中級(jí)指南之如何在vite中使用svg圖標(biāo)詳解
在以webpack為構(gòu)建工具的開(kāi)發(fā)環(huán)境中我們可以很方便的實(shí)現(xiàn)SVG圖標(biāo)的組件化,下面這篇文章主要給大家介紹了關(guān)于Vue3中級(jí)指南之如何在vite中使用svg圖標(biāo)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
Vue中事件總線(xiàn)(eventBus)的深入詳解及使用
在vue項(xiàng)目中父子組件間的通訊很方便,但兄弟組件或多層嵌套組件間的通訊,就會(huì)比較麻煩,這時(shí)使用eventBus通訊,就可以很便捷的解決這個(gè)問(wèn)題,這篇文章主要給大家介紹了關(guān)于Vue中事件總線(xiàn)(eventBus)使用的相關(guān)資料,需要的朋友可以參考下
2022-03-03
Vue路由回退的完美解決方案（vue-route-manager）
最近做了一個(gè)vue項(xiàng)目關(guān)于路由場(chǎng)景的問(wèn)題,路由如何回退指定頁(yè)面,在此做個(gè)記錄,這篇文章主要給大家介紹了關(guān)于Vue路由回退的完美解決方案,主要利用的是vue-route-manager,需要的朋友可以參考下
2021-09-09
vue路由傳參及獲取參數(shù)的方式總結(jié)
這篇文章主要介紹了vue路由傳參及獲取參數(shù)的方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue3獲取當(dāng)前路由地址的兩種方法
近期在做ve3的項(xiàng)目時(shí)因?yàn)楣δ苄枰?需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
vue 中 beforeRouteEnter 死循環(huán)的問(wèn)題
這篇文章主要介紹了vue beforeRouteEnter 死循環(huán)的問(wèn)題,在文章末尾給大家補(bǔ)充介紹了vue中beforeRouteEnter使用的誤區(qū)，需要的朋友可以參考下
2019-04-04
vue3+elementPlus?table中添加輸入框并提交校驗(yàn)
這篇文章主要介紹了vue3+elementPlus?table里添加輸入框并提交校驗(yàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-08-08
vue 導(dǎo)航菜單刷新?tīng)顟B(tài)不消失,顯示對(duì)應(yīng)的路由界面操作
這篇文章主要介紹了vue 導(dǎo)航菜單刷新?tīng)顟B(tài)不消失,顯示對(duì)應(yīng)的路由界面操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
解讀vue生成的文件目錄結(jié)構(gòu)及說(shuō)明
本篇文章主要介紹了解讀vue生成的文件目錄結(jié)構(gòu)及說(shuō)明，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11