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中匿名函数,函数直接量和闭包
May 08 Javascript
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 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/06/06 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
php微信开发之关注事件
2018/06/14 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
使用正则替换变量
2007/05/05 Javascript
use jscript Create a SQL Server database
2007/06/16 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
浅谈js中的闭包
2015/03/16 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Python整数对象实现原理详解
2019/07/01 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
商场总经理岗位职责
2014/02/03 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
导游词格式
2015/02/13 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB