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}"以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
前端插件库之vue3使用vue-codemirror插件的步骤和实例
CodeMirror是一款基于JavaScript、面向语言的前端代码编辑器,下面这篇文章主要给大家介绍了关于前端插件库之vue3使用vue-codemirror插件的步骤和实例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
elementUI el-form 数据无法赋值且不报错解决方法
本文主要介绍了elementUI el-form 数据无法赋值且不报错解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
这篇文章主要介绍了vue-cli3+typescript初体验小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
Vue使用codemirror实现一个可插入自定义标签的textarea
这篇文章主要为大家详细介绍了Vue如何使用codemirror实现一个可插入自定义标签的textarea,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
这篇文章主要介绍了vue与electron实现进程间的通信详情，本文主要介绍electron渲染进程和主进程间的通信，以及在渲染进程和主进程中常用的配置项，需要的朋友可以参考一下2022-09-09
这篇文章主要介绍了vue3中安装使用vue-i18n实时切换语言不用刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
这篇文章主要介绍了vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最近用vue框架做了个后台管理项目,涉及权限,所以下面这篇文章主要给大家介绍了关于vue2/vue3路由权限管理的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了关于Pinia状态持久化问题，具有很好的参考价值，希望对大家有所帮助。2023-03-03
最新评论