编程 Javascript

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

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

- Author -

Akatsuki233

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

自己的js工具 Cookie 封装

Aug 21 Javascript

jQuery 选择器项目实例分析及实现代码

Dec 28 Javascript

浅析js中的浮点型运算问题

Jan 06 Javascript

jQuery选择器源码解读（八）：addCombinator函数

Mar 31 Javascript

jQuery内存泄露解决办法

Dec 13 Javascript

使用Angular缓存父页面数据的方法

Jan 03 Javascript

快速解决vue-cli在ie9+中无效的问题

Sep 04 Javascript

vue-cli webpack 引入swiper的操作方法

Sep 15 Javascript

微信小程序搜索框组件代码实例

Sep 06 Javascript

layer弹出层倒计时关闭的实现方法

Sep 27 Javascript

JS如何在不同平台实现多语言方式

Jul 16 Javascript

Vue的过滤器你真了解吗

Feb 24 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

ThinkPHP5&5.1框架关联模型分页操作示例

2019/08/03 PHP

laravel框架使用FormRequest进行表单验证，验证异常返回JSON操作示例

2020/02/18 PHP

定义select的边框颜色

2008/04/28 Javascript

jquery实现tr元素的上下移动示例代码

2013/12/20 Javascript

jquery队列queue与原生模仿其实现方法分享

2014/03/25 Javascript

js获取及修改网页背景色和字体色的方法

2015/12/29 Javascript

Angular.js与Bootstrap相结合实现表格分页代码

2016/04/12 Javascript

举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历

2016/07/07 Javascript

jQuery使用deferreds串行多个ajax请求

2016/08/22 Javascript

JavaScript event对象整理及详细介绍

2016/10/10 Javascript

js html5 css俄罗斯方块游戏再现

2016/10/17 Javascript

Angular 2.x学习教程之结构指令详解

2017/05/25 Javascript

JS实现的按钮点击颜色切换功能示例

2017/10/19 Javascript

js统计页面上每个标签的数量实例代码

2018/05/29 Javascript

vue实现在v-html的html字符串中绑定事件

2019/10/28 Javascript

vue 扩展现有组件的操作

2020/08/14 Javascript

[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15

2019/08/16 DOTA

如何使用Python标准库进行性能测试

2019/06/25 Python

Django 解决由save方法引发的错误

2020/05/21 Python

使用Python将xmind脑图转成excel用例的实现代码（一）

2020/10/12 Python

Python 实现二叉查找树的示例代码

2020/12/21 Python

CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式

2014/10/11 HTML / CSS

Canvas实现贝赛尔曲线轨迹动画的示例代码

2019/04/25 HTML / CSS

详解移动端h5页面根据屏幕适配的四种方案

2020/04/15 HTML / CSS

Omio中国：全欧洲低价大巴、火车和航班搜索和比价

2018/08/09 全球购物

汽车检测与维修应届毕业生求职信

2013/10/19 职场文书

创业计划书撰写原则

2014/01/25 职场文书

《掌声》教学反思

2014/02/23 职场文书

人事专员的岗位职责

2014/03/01 职场文书

2014年清明节网上祭英烈寄语

2014/04/09 职场文书

班主任自我评价范文

2015/03/11 职场文书

医院办公室主任岗位职责

2015/04/01 职场文书

超市采购员岗位职责

2015/04/07 职场文书

2015年大学生党员承诺书

2015/04/27 职场文书

python turtle绘制多边形和跳跃和改变速度特效

2022/03/16 Python

移除Selenium中window.navigator.webdriver值

2022/06/10 Python