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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
深入PHP变量存储的详解
2013/06/13 PHP
php学习笔记之面向对象
2014/11/08 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
PHP7 新增功能
2021/03/09 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python中的字符串替换操作示例
2016/06/27 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
自考生毕业自我鉴定
2013/10/10 职场文书
效能监察建议书
2014/05/19 职场文书
关于建议书的格式范文
2014/05/20 职场文书
美化环境标语
2014/06/20 职场文书
六查六看心得体会
2014/10/14 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers