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 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
javascript function调用时的参数检测常用办法
Feb 26 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 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配置文件中最常用四个ini函数
2007/03/19 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
jQuery事件详解
2017/02/23 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
Python实现批量修改文件名实例
2015/07/08 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
解决python3输入的坑——input()
2020/12/05 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
亲子拓展活动方案
2014/02/20 职场文书
我为自己代言广告词
2014/03/18 职场文书
教师考核材料
2014/05/21 职场文书
节能环保标语
2014/06/12 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
小学运动会入场口号
2015/12/24 职场文书
Python图片检索之以图搜图
2021/05/31 Python