vue 动态添加class,三个以上的条件做判断方式


Posted in Javascript onNovember 02, 2020

如果 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,三个以上的条件做判断方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
javascript里使用php代码实例
Dec 13 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 #Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 #Javascript
Vant picker 多级联动操作
Nov 02 #Javascript
vue实现列表拖拽排序的功能
Nov 02 #Javascript
用vue写一个日历
Nov 02 #Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 #Javascript
vant自定义二级菜单操作
Nov 02 #Javascript
You might like
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
php json相关函数用法示例
2017/03/28 PHP
javascript 二维数组的实现与应用
2010/03/16 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
Python计时相关操作详解【time,datetime】
2017/05/26 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
python 表格打印代码实例解析
2019/10/12 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
资深地理教师自我评价
2013/09/21 职场文书
通信生自我鉴定
2014/01/18 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
社区党建工作方案
2014/06/10 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
批评与自我批评总结
2014/10/17 职场文书
租赁协议书
2015/01/27 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
Java界面编程实现界面跳转
2022/06/16 Java/Android