vue多個(gè)元素的樣式選擇器問(wèn)題
更新時(shí)間：2019年11月29日 14:02:31 作者：no_have_name_
這篇文章主要介紹了vue多個(gè)元素的樣式選擇器問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
三目運(yùn)算符只能進(jìn)行兩個(gè)的選擇判斷，多個(gè)選擇就很難受了。
廢話少說(shuō)，直接上源碼。
首先獲取它的索引，通過(guò)索引來(lái)判斷樣式
// 索引key判斷
<div class="carborder" v-for="(value, key) in mycarinfo" :key="key">
<router-link
:class="rcar[key]"
to="/payment"
>
我是什么顏色
</router-link>
</div>
在data里面定義元素的樣式 數(shù)組格式
// 數(shù)組格式
data() {
return {
rcar:[
"rcar",
"rcar2",
"rcar3",
"rcar4",
"rcar5",
]
};
下面就是css寫自己的樣式了
// 自己的樣式
.rcar {
background-color: #1388ef;
}
.rcar2 {
background-color: #a0a0a0;
}
.rcar3 {
background-color: #282828;
}
.rcar4 {
background-color: #efc313;
}
.rcar5 {
background-color: #b9bab9;
}
總結(jié)
以上所述是小編給大家介紹的vue多個(gè)元素的樣式選擇器問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了讓Vue響應(yīng)Map或Set的變化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue項(xiàng)目接口域名動(dòng)態(tài)獲取操作
這篇文章主要介紹了vue項(xiàng)目接口域名動(dòng)態(tài)獲取操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了vue的table表格組件的封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
本篇文章主要介紹了詳解vue2路由vue-router配置（懶加載），實(shí)例分析了vue-router懶加載的技巧，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-04-04
這篇文章主要介紹了Vue和React的區(qū)別，畢竟是兩個(gè)框架，不像兩個(gè)?API，要說(shuō)細(xì)節(jié)上的區(qū)別就太多太多了，本文就簡(jiǎn)單的帶大家說(shuō)說(shuō)Vue?和?React?的區(qū)別,需要的朋友可以參考下2023-05-05
Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners)
這篇文章主要介紹了Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners),需要的朋友可以參考下2018-05-05
vue實(shí)現(xiàn)個(gè)人信息查看和密碼修改功能
本文通過(guò)實(shí)例代碼給大家介紹了vue實(shí)現(xiàn)個(gè)人信息查看和密碼修改功能，文中給大家補(bǔ)充介紹了vue實(shí)現(xiàn)密碼顯示隱藏切換功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，感興趣的朋友一起看看吧2018-05-05
這篇文章主要介紹了vue中使用Tinymce的示例,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue cli 3.0 搭建項(xiàng)目的圖文教程，本文通過(guò)圖片文字相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue在自定義組件上使用v-model和.sync的方法實(shí)例
自定義組件的v-model和.sync修飾符其實(shí)本質(zhì)上都是vue的語(yǔ)法糖,用于實(shí)現(xiàn)父子組件的"數(shù)據(jù)"雙向綁定,下面這篇文章主要給大家介紹了關(guān)于vue在自定義組件上使用v-model和.sync的相關(guān)資料,需要的朋友可以參考下2022-07-07