vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式
更新時(shí)間：2020年11月02日 15:19:04 作者：Akatsuki233
這篇文章主要介紹了vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
如果 status為1，樣式為redRoom
如果 status為2，樣式為greenRoom1
如果 status為其他，樣式為greenRoom2
:class="{'redRoom': Number(items.status) === 1, 'greenRoom1': Number(items.status) === 2, greenRoom2: Number(items.status) > 2}"
補(bǔ)充知識(shí)：vue 根據(jù)變量值來(lái)判斷顯示class
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
<div :class="['bottom-btn',{'face-btn':type=='face'}]">
</div>
以上這篇vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue把頁(yè)面轉(zhuǎn)換成圖片導(dǎo)出方式(html2canvas導(dǎo)出不全問(wèn)題)
這篇文章主要介紹了vue把頁(yè)面轉(zhuǎn)換成圖片導(dǎo)出方式(html2canvas導(dǎo)出不全問(wèn)題),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解vue路由篇(動(dòng)態(tài)路由、路由嵌套)
這篇文章主要介紹了詳解vue路由篇(動(dòng)態(tài)路由、路由嵌套)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
ElementUI組件Dialog彈窗再次打開(kāi)表單仍顯示上次數(shù)據(jù)的問(wèn)題
這篇文章主要介紹了ElementUI組件Dialog彈窗再次打開(kāi)表單仍顯示上次數(shù)據(jù)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue?watch中監(jiān)聽(tīng)值的變化,判斷后修改值方式
這篇文章主要介紹了Vue?watch中監(jiān)聽(tīng)值的變化,判斷后修改值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vuejs第六篇之Vuejs與form元素實(shí)例解析
本文通過(guò)實(shí)例給大家詳細(xì)介紹了Vuejs與form元素的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了vue cli升級(jí)webapck4的步驟以及需要注意的地方，大家可以跟著操作學(xué)習(xí)下。2018-04-04
這篇文章主要介紹了在vue3.0中如何配置代理問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue常見(jiàn)組件間通信方案及典型應(yīng)用場(chǎng)景詳解
這篇文章主要為大家介紹了Vue常見(jiàn)組件間通信方案及典型應(yīng)用場(chǎng)景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
.env文件是vue運(yùn)行項(xiàng)目時(shí)的環(huán)境配置文件，這篇文章主要介紹了vue多環(huán)境配置之 .env配置文件,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了在Vue3組合式API中如何優(yōu)化列表渲染性能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12