vue 動態(tài)添加class,三個以上的條件做判斷方式
更新時間：2020年11月02日 15:19:04 作者：Akatsuki233
這篇文章主要介紹了vue 動態(tài)添加class,三個以上的條件做判斷方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如果 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ǔ)充知識：vue 根據(jù)變量值來判斷顯示class
我就廢話不多說了，大家還是直接看代碼吧~
<div :class="['bottom-btn',{'face-btn':type=='face'}]">
</div>
以上這篇vue 動態(tài)添加class,三個以上的條件做判斷方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue element table中自定義一些input的驗(yàn)證操作
這篇文章主要介紹了vue element table中自定義一些input的驗(yàn)證操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫詳細(xì)步驟(超詳細(xì))
Electron是一個基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫的詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細(xì)介紹了Vue3+Ts如何實(shí)現(xiàn)緩存,用戶搜索詞本地排名,延遲消費(fèi)或者消息隊(duì)列,用戶簽到和鎖,以及接口限流,還有全局ID等功能,需要的可以參考下2024-03-03
vue實(shí)現(xiàn)水波漣漪效果的點(diǎn)擊反饋指令
鼠標(biāo)移入時的小手、鼠標(biāo)點(diǎn)擊時按鈕下壓彈起的動畫、觸屏應(yīng)用點(diǎn)擊時的屏幕震動，這些效果也被統(tǒng)稱為點(diǎn)擊反饋，雖然看似是應(yīng)用中的細(xì)枝末節(jié)，但是只要稍微投入一點(diǎn)點(diǎn)心思，帶來的用戶體驗(yàn)提升是十分明顯的,這里作者為小伙伴們推薦一種作者最喜歡的點(diǎn)擊反饋效果。2021-05-05
這篇文章主要介紹了vue移動端時彈出側(cè)邊抽屜菜單,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
vue自動路由-單頁面項(xiàng)目（非build時構(gòu)建）
這篇文章主要介紹了vue自動路由-單頁面項(xiàng)目（非build時構(gòu)建）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要為大家介紹了Vue配置環(huán)境變量，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要介紹了vue查找指令和模板,基本思路是需要判斷當(dāng)前遍歷到的節(jié)點(diǎn)是一個元素還是一個文本，隨著思路的展開我們就來實(shí)現(xiàn)這個功能，需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue在數(shù)據(jù)發(fā)生變化后是如何更新頁面的，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
vue2.0 element-ui中el-select選擇器無法顯示選中的內(nèi)容(解決方法)
這篇文章主要介紹了vue2.0 element-ui中的el-select選擇器無法顯示選中的內(nèi)容,在文中小編使用的是element-ui V2.2.3。具體解決方法及示例代碼大家參考下本文2018-08-08