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

更新時間：2018年09月05日 10:13:33 作者：西風XF

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

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

實現(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的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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