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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 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
php+oracle 分页类
2006/10/09 PHP
php生成与读取excel文件
2016/10/14 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
JQuery中extend的用法实例分析
2015/02/08 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
Python中的yield浅析
2014/06/16 Python
Python中请使用isinstance()判断变量类型
2014/08/25 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
Tostadora意大利:定制T恤
2019/04/08 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
大一学生的职业生涯规划书范文
2014/01/19 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
学校门卫岗位职责
2014/03/16 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
安全责任协议书
2014/04/21 职场文书
幼儿园运动会口号
2014/06/07 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
后进生评语大全
2015/01/04 职场文书
2015年计划生育责任书
2015/05/08 职场文书
地球上的星星观后感
2015/06/02 职场文书
浅谈MySQL中的六种日志
2022/03/23 MySQL