编程 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实现线性表的顺序表示方法示例【经典数据结构】

Apr 11 Javascript

ionic选择多张图片上传的示例代码

Oct 10 Javascript

vue文件树组件使用详解

Mar 29 Javascript

springMvc 前端用json的方式向后台传递对象数组方法

Aug 07 Javascript

vue发送ajax请求详解

Oct 09 Javascript

JavaScript 中 JSON.parse 函数和 JSON.stringify 函数

Dec 05 Javascript

Javascript读写cookie的实例源码

Mar 16 Javascript

微信小程序点餐系统开发常见问题汇总

Aug 06 Javascript

vue实现移动端项目多行文本溢出省略

Jul 29 Javascript

JavaScript本地储存:localStorage、sessionStorage、cookie的使用

Oct 13 Javascript

超详细小程序定位地图模块全系列开发教学

Nov 24 Javascript

Vue 数据响应式相关总结

Jan 28 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无限级栏目分类读取的实现代码

2014/02/19 PHP

php设置session值和cookies的学习示例

2014/03/21 PHP

php读取3389的脚本

2014/05/06 PHP

php操作（删除,提取,增加）zip文件方法详解

2015/03/12 PHP

PHP入门教程之面向对象基本概念实例分析

2016/09/11 PHP

基于jQueryUI和Corethink实现百度的搜索提示功能

2016/11/09 PHP

ThinkPHP框架整合微信支付之刷卡模式图文详解

2019/04/10 PHP

基于jquery的checkbox下拉框插件代码

2010/06/25 Javascript

jquery 单击li防止重复加载的实现代码

2010/12/24 Javascript

jquery 查找iframe父级页面元素的实现代码

2011/08/28 Javascript

下载文件个别浏览器文件名乱码解决办法

2013/03/19 Javascript

JS获取各种宽度、高度的简单介绍

2014/12/19 Javascript

jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

2015/10/30 Javascript

JS实现网页上随机产生超链接地址的方法

2015/11/09 Javascript

深入浅析JavaScript函数前面的加号和叹号

2016/07/09 Javascript

用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法

2016/10/27 Javascript

Angular 4依赖注入学习教程之ClassProvider的使用（三）

2017/06/04 Javascript

Vue shopCart 组件开发详解

2018/01/26 Javascript

jQuery实现表格隔行换色

2018/09/01 jQuery

this在vue和小程序中的使用详解

2019/01/28 Javascript

vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解

2019/10/15 Javascript

JS实现导航栏楼层特效

2020/01/01 Javascript

[05:39]2014DOTA2西雅图国际邀请赛淘汰赛7月14日TOPPLAY

2014/07/14 DOTA

[03:15]2014DOTA2国际邀请赛专访国士无双信心满满

2014/07/12 DOTA

彻底理解Python list切片原理

2017/10/27 Python

python实现神经网络感知器算法

2017/12/20 Python

Python3导入CSV文件的实例(跟Python2有些许的不同)

2018/06/22 Python

python实现将一个数组逆序输出的方法

2018/06/25 Python

python远程连接MySQL数据库

2019/04/19 Python

python语言基本语句用法总结

2019/06/11 Python

HTML5拖拽功能实现的拼图游戏

2018/07/31 HTML / CSS

美国在线印刷公司：PsPrint

2017/10/12 全球购物

Priority Pass机场贵宾室会籍计划：全球超过1200间机场贵宾室

2018/08/26 全球购物

公司委托书范本

2014/04/04 职场文书

Spring Bean的实例化之属性注入源码剖析过程

2021/06/13 Java/Android

在CSS中使用when/else的方法

2022/01/18 HTML / CSS