快捷導(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ì)大家有所幫助。一起跟隨小編過來看看吧

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

實(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)文章

vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟
這篇文章主要介紹了vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-03-03
element-ui中el-input只輸入數(shù)字(包括整數(shù)和小數(shù))
開發(fā)中有時(shí)候需要input只能輸入數(shù)字,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-input只輸入數(shù)字(包括整數(shù)和小數(shù))的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
關(guān)于vue2強(qiáng)制刷新,解決頁面不會(huì)重新渲染的問題
今天小編就為大家分享一篇關(guān)于vue2強(qiáng)制刷新,解決頁面不會(huì)重新渲染的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
Vue獲取DOM的幾種方法總結(jié)
這篇文章主要介紹了Vue獲取DOM的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue3.x項(xiàng)目降級(jí)到vue2.7的解決方案
Vue2.7是Vue2.x的最終次要版本,下面這篇文章主要給大家介紹了關(guān)于vue3.x項(xiàng)目降級(jí)到vue2.7的解決方案,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
vue-admin-template解決登錄和跨域問題解決
本文主要介紹了vue-admin-template解決登錄和跨域問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
關(guān)于vue利用postcss-pxtorem進(jìn)行移動(dòng)端適配的問題
這篇文章主要介紹了關(guān)于vue利用postcss-pxtorem進(jìn)行移動(dòng)端適配的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
Vue3使用MD5加密實(shí)戰(zhàn)案例(清晰明了)
MD5是一種信息摘要算法(對(duì)稱加密),一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個(gè)128位(16字節(jié))的散列值,用來確保信息傳輸完整一致性,這篇文章主要給大家介紹了關(guān)于Vue3使用MD5加密的相關(guān)資料,需要的朋友可以參考下
2023-05-05
Vue獲取input值的四種常用方法
Vue是一種流行的Web開發(fā)框架,它提供了一個(gè)雙向綁定的語法糖。在Vue中,我們可以很容易地獲取頁面上的數(shù)據(jù),并且可以實(shí)時(shí)的響應(yīng)其變化,這篇文章主要給大家介紹了關(guān)于Vue獲取input值的四種常用方法,需要的朋友可以參考下
2023-09-09
vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
這篇文章主要介紹了vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06