编程 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 相关文章推荐

JavaScript Event学习第六章事件的访问

Feb 07 Javascript

理解JSON：3分钟课程

Oct 28 Javascript

关闭浏览器输入框自动补齐兼容IE,FF,Chrome等主流浏览器

Feb 11 Javascript

Javascript 函数parseInt()转换时出现bug问题

May 20 Javascript

textarea不能通过maxlength属性来限制字数的解决方法

Sep 01 Javascript

使用jQuery简单实现模拟浏览器搜索功能

Dec 21 Javascript

jQuery中$.grep() 过滤函数数组过滤

Nov 22 Javascript

Bootstrap基本样式学习笔记之表单(3)

Dec 07 Javascript

jQuery监听浏览器窗口大小的变化实例

Feb 07 Javascript

JS运动特效之任意值添加运动的方法分析

Jan 24 Javascript

jQuery实现模糊搜索功能的方法分析

Jun 29 jQuery

layui 对弹窗 form表单赋值的实现方法

Sep 04 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 parse_url 一个好用的函数

2009/10/03 PHP

php实现数组重复数字统计实例

2018/09/30 PHP

js 设置选中行的样式的实现代码

2010/05/24 Javascript

javascript 中String.match()与RegExp.exec()的区别说明

2013/01/10 Javascript

Javascript计算两个marker之间的距离(Google Map V3)

2013/04/26 Javascript

代码触发js事件(click、change)示例应用

2013/12/13 Javascript

jquery实现textarea 高度自适应

2015/03/11 Javascript

JavaScript页面实时显示当前时间实例代码

2016/10/23 Javascript

基于BootStrap实现简洁注册界面

2017/07/20 Javascript

浅谈在koa2中实现页面渲染的全局数据

2017/10/09 Javascript

用vue封装插件并发布到npm的方法步骤

2017/10/18 Javascript

JS实现用特殊符号替换字符串的中间部分区域的实例代码

2018/07/24 Javascript

详解微信小程序的 request 封装示例

2018/08/21 Javascript

浅谈js中的bind

2019/03/18 Javascript

浅谈实现在线预览PDF的几种解决办法

2020/08/10 Javascript

Vue实现点击当前行变色

2020/12/14 Vue.js

vue+element UI实现树形表格

2020/12/29 Vue.js

python根据路径导入模块的方法

2014/09/30 Python

python连接mysql实例分享

2016/10/09 Python

python与caffe改变通道顺序的方法

2018/08/04 Python

pycharm 取消默认的右击运行unittest的方法

2018/11/29 Python

Python 数据可视化pyecharts的使用详解

2019/06/26 Python

python通过cython加密代码

2020/12/11 Python

用pushplus+python监控亚马逊到货动态推送微信

2021/01/29 Python

50个强大璀璨的CSS3/JS技术运用实例

2010/02/27 HTML / CSS

泰国演唱会订票网站：StubHub泰国

2018/02/26 全球购物

土木工程专业个人求职信

2013/12/05 职场文书

工程专业毕业生自荐信范文

2013/12/25 职场文书

信息总监管理职责范本

2014/03/08 职场文书

大学生学习2014全国两会心得体会

2014/03/13 职场文书

软件项目实施计划书

2014/05/02 职场文书

甲乙双方合作协议书

2014/10/13 职场文书

学生旷课检讨书500字

2014/10/28 职场文书

艺术节开幕词

2015/01/28 职场文书

邮政营业员岗位职责

2015/04/14 职场文书

利用Apache Common将java对象池化的问题

2022/06/16 Servers