vue三元运算之多重条件判断方式(多个枚举值转译)

更新时间：2022年09月14日 09:15:52 作者：前端江太公

这篇文章主要介绍了vue三元运算之多重条件判断方式(多个枚举值转译)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue多重条件判断(多个枚举值转译)

直接上代码：

div class="msgLi">
     <p>组织设置:</p>
     <p>{{ organInfo.partySetup=="1"?"撤销":organInfo.partySetup=="2"?"调整":organInfo.partySetup=="3"?"更名":organInfo.partySetup }}</p>
</div>

vue标签中使用三元运算符

<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}"

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3的10种组件通信方式总结
组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,这篇文章主要给大家介绍了关于Vue3的10种组件通信方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
基于VuePress 轻量级静态网站生成器的实现方法
VuePress是一个基于Vue的轻量级静态网站生成器以及为编写技术文档而优化的默认主题。这么文章给大家详细介绍了vuepress 静态网站生成器的方法，需要的朋友参考下吧
2018-04-04
详解如何优雅运用Vue中的KeepAlive组件
在Vue中,KeepAlive组件是一种特殊的组件,用于缓存已经渲染过的组件实例,本文主要为大家详细介绍了KeepAlive组件的用法,需要的小伙伴可以参考下
2023-09-09
vue中数字相加为字串转化为数值的例子
今天小编就为大家分享一篇vue中数字相加为字串转化为数值的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
在JS中如何同步修改vue中的变量
这篇文章主要介绍了在JS中如何同步修改vue中的变量问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue过滤器实现日期格式化的案例分析
这篇文章主要介绍了vue过滤器实现日期格式化的案例分析，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-07-07
记一次用ts+vuecli4重构项目的实现
这篇文章主要介绍了记一次用ts+vuecli4重构项目的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
Vue 项目中选择 TSX 而非传统 .vue 文件的原因分析
文章探讨了Vue项目中使用TSX（TypeScript JSX）的背景、优势和局限性,TSX结合了TypeScript和JSX,增强了类型安全和代码组织性,但也增加了学习曲线和可读性问题,对于复杂应用,TSX提供了更大的灵活性和类型支持,逐渐成为一些开发者的选择
2024-11-11
Vue3.0写自定义指令的简单步骤记录
Vue中除了内置指令,也允许注册自定义的指令,下面这篇文章主要给大家介绍了关于Vue3.0写自定义指令的相关资料,需要的朋友可以参考下
2021-06-06
Vue关于element穿梭框进行的修改成table表格穿梭框方式
这篇文章主要介绍了Vue关于element穿梭框进行的修改成table表格穿梭框方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04