vue 动态添加class,三个以上的条件做判断方式
更新时间：2020年11月02日 15:19:04 作者：Akatsuki233
这篇文章主要介绍了vue 动态添加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}"
补充知识：vue 根据变量值来判断显示class
我就废话不多说了，大家还是直接看代码吧~
<div :class="['bottom-btn',{'face-btn':type=='face'}]">
</div>
以上这篇vue 动态添加class,三个以上的条件做判断方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue把页面转换成图片导出方式(html2canvas导出不全问题)
这篇文章主要介绍了vue把页面转换成图片导出方式(html2canvas导出不全问题),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了详解vue路由篇(动态路由、路由嵌套)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题
这篇文章主要介绍了ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue watch中监听值的变化,判断后修改值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文通过实例给大家详细介绍了Vuejs与form元素的相关知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了vue cli升级webapck4的步骤以及需要注意的地方，大家可以跟着操作学习下。2018-04-04
这篇文章主要介绍了在vue3.0中如何配置代理问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家介绍了Vue常见组件间通信方案及典型应用场景详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
.env文件是vue运行项目时的环境配置文件，这篇文章主要介绍了vue多环境配置之 .env配置文件,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了在Vue3组合式API中如何优化列表渲染性能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-12-12
最新评论