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 相关文章推荐
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
javascript闭包入门示例
Apr 30 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
Python中property属性实例解析
2018/02/10 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python 基于opencv去除图片阴影
2021/01/26 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
电脑教师的自我评价
2013/12/18 职场文书
小学老师寄语大全
2014/04/04 职场文书
党纪处分决定书
2015/06/24 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js