vue三元運(yùn)算之多重條件判斷方式(多個枚舉值轉(zhuǎn)譯)
更新時間：2022年09月14日 09:15:52 作者：前端江太公
這篇文章主要介紹了vue三元運(yùn)算之多重條件判斷方式(多個枚舉值轉(zhuǎn)譯)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue多重條件判斷(多個枚舉值轉(zhuǎn)譯)
直接上代碼：
div class="msgLi">
? ? ?<p>組織設(shè)置:</p>
? ? ?<p>{{ organInfo.partySetup=="1"?"撤銷":organInfo.partySetup=="2"?"調(diào)整":organInfo.partySetup=="3"?"更名":organInfo.partySetup }}</p>
</div>vue標(biāo)簽中使用三元運(yùn)算符
<span :class="`${s2?'s2':'step2}`"></span>
? <a :class="{ 'active': hash==='finish','nav-link':true}" href="#/finish" rel="external nofollow" >已完成</a>
<span :class="['menu',{statusClass:startStatus}]"></span>- 如果 status為1，樣式為redRoom
- 如果 status為2，樣式為greenRoom1
- 如果 status為其他，樣式為greenRoom2
:class="{'redRoom': Number(items.status) === 1, 'greenRoom1': Number(items.status) === 2, greenRoom2: Number(items.status) > 2}"以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
組件是vue.js最強(qiáng)大的功能之一,而組件實例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無法相互引用,這篇文章主要給大家介紹了關(guān)于Vue3的10種組件通信方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
基于VuePress 輕量級靜態(tài)網(wǎng)站生成器的實現(xiàn)方法
VuePress是一個基于Vue的輕量級靜態(tài)網(wǎng)站生成器以及為編寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。這么文章給大家詳細(xì)介紹了vuepress 靜態(tài)網(wǎng)站生成器的方法，需要的朋友參考下吧2018-04-04
詳解如何優(yōu)雅運(yùn)用Vue中的KeepAlive組件
在Vue中,KeepAlive組件是一種特殊的組件,用于緩存已經(jīng)渲染過的組件實例,本文主要為大家詳細(xì)介紹了KeepAlive組件的用法,需要的小伙伴可以參考下2023-09-09
vue中 數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子
今天小編就為大家分享一篇vue中 數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了在JS中如何同步修改vue中的變量問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue過濾器實現(xiàn)日期格式化的案例分析，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
記一次用ts+vuecli4重構(gòu)項目的實現(xiàn)
這篇文章主要介紹了記一次用ts+vuecli4重構(gòu)項目的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vue?項目中選擇?TSX?而非傳統(tǒng)?.vue?文件的原因分析
文章探討了Vue項目中使用TSX（TypeScript?JSX）的背景、優(yōu)勢和局限性,TSX結(jié)合了TypeScript和JSX,增強(qiáng)了類型安全和代碼組織性,但也增加了學(xué)習(xí)曲線和可讀性問題,對于復(fù)雜應(yīng)用,TSX提供了更大的靈活性和類型支持,逐漸成為一些開發(fā)者的選擇2024-11-11
Vue中除了內(nèi)置指令,也允許注冊自定義的指令,下面這篇文章主要給大家介紹了關(guān)于Vue3.0寫自定義指令的相關(guān)資料,需要的朋友可以參考下2021-06-06
Vue關(guān)于element穿梭框進(jìn)行的修改成table表格穿梭框方式
這篇文章主要介紹了Vue關(guān)于element穿梭框進(jìn)行的修改成table表格穿梭框方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04