编程 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 代码集(学习js的朋友可以看下)

Jul 22 Javascript

js在输入框屏蔽按键,只能键入数字的示例代码

Jan 03 Javascript

js图片闪动特效可以控制间隔时间如几分钟闪动一下

Aug 12 Javascript

jquery中append()与appendto()用法分析

Nov 14 Javascript

理解js回收机制通俗易懂版

Feb 29 Javascript

JavaScript算法系列之快速排序（Quicksort）算法实例详解

Sep 04 Javascript

js select下拉联动更具级联性!

Apr 17 Javascript

基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)

Nov 21 Javascript

微信小程序slider组件使用详解

Jan 31 Javascript

解决JavaScript layui 下拉框不显示的问题

Aug 14 Javascript

解决JS表单验证只有第一个IF起作用的问题

Dec 04 Javascript

简述Vue中容易被忽视的知识点

Dec 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中time(),date(),mktime()区别介绍

2013/09/28 PHP

php用户注册页面利用js进行表单验证具体实例

2013/10/17 PHP

ThinkPHP中的关联模型注意点

2014/06/16 PHP

PHP实现 APP端微信支付功能

2018/06/22 PHP

laravel 解决后端无法获取到前端Post过来的值问题

2019/10/22 PHP

使用Modello编写JavaScript类

2006/12/22 Javascript

使用原生js写的一个简单slider

2014/04/29 Javascript

JavaScript中九种常用排序算法

2014/09/02 Javascript

node.js中的fs.rename方法使用说明

2014/12/16 Javascript

基于javascript的COOkie的操作实现只能点一次

2014/12/26 Javascript

js创建对象的方式总结

2015/01/10 Javascript

EasyUI中datagrid在ie下reload失败解决方案

2015/03/09 Javascript

js去除浏览器默认底图的方法

2015/06/08 Javascript

JavaScript中getUTCSeconds()方法的使用详解

2015/06/11 Javascript

基于Jquery实现表单验证

2020/07/20 Javascript

JavaScript中的Number数字类型学习笔记

2016/05/26 Javascript

一句jQuery代码实现返回顶部效果（简单实用）

2016/12/28 Javascript

jQuery中select与datalist制作下拉菜单时的区别浅析

2016/12/30 Javascript

vue组件Prop传递数据的实现示例

2017/08/17 Javascript

react-router browserHistory刷新页面404问题解决方法

2017/12/29 Javascript

深入理解Vue Computed计算属性原理

2018/05/29 Javascript

js实现下拉框二级联动

2018/12/04 Javascript

vue element upload实现图片本地预览

2019/08/20 Javascript

JavaScript实现身份证验证代码实例

2019/08/26 Javascript

微信小程序中target和currentTarget的区别小结

2020/11/06 Javascript

在Python中使用异步Socket编程性能测试

2014/06/25 Python

Python实现批量转换文件编码的方法

2015/07/28 Python

结合Python的SimpleHTTPServer源码来解析socket通信

2016/06/27 Python

Python collections模块的使用方法

2020/10/09 Python

英国知名奢侈品包包品牌：Milli Millu

2016/12/22 全球购物

垃圾回收的优点和原理

2014/05/16 面试题

心碎乌托邦的创业计划书范文

2013/12/26 职场文书

会计电算化应届生自荐信

2014/02/25 职场文书

社会学专业求职信

2014/07/17 职场文书

市场部岗位职责

2015/02/12 职场文书

2015大学生求职信范文

2015/03/20 职场文书