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