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

jquery动态增加删除表格行的小例子

Nov 14 Javascript

用unescape反编码得出汉字示例

Apr 24 Javascript

编写简单的jQuery提示插件

Dec 21 Javascript

jquery获取url参数及url加参数的方法

Oct 26 Javascript

用JS写的一个Ajax库(实例代码)

Aug 06 Javascript

JavaScript利用Date实现简单的倒计时实例

Jan 12 Javascript

js中的面向对象入门

Mar 06 Javascript

详解用Node.js写一个简单的命令行工具

Mar 01 Javascript

js实现多图和单图上传显示

Dec 18 Javascript

javascript实现留言板功能

Feb 08 Javascript

sharp.js安装过程中遇到的问题总结

Apr 02 Javascript

jQuery实现计算器功能

Oct 19 jQuery

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

CI框架验证码CAPTCHA辅助函数用法实例

2014/11/05 PHP

使用PHP如何实现高效安全的ftp服务器(一)

2015/12/20 PHP

PHP使用strstr()函数获取指定字符串后所有字符的方法

2016/01/07 PHP

讨论javascript(一)工厂方式 js面象对象的定义方法

2009/12/15 Javascript

JS 跳转页面延迟2种方法

2013/03/29 Javascript

jquery ajax同步异步的执行最终解决方案

2013/04/26 Javascript

多个jquery.datatable共存,checkbox全选异常的快速解决方法

2013/12/10 Javascript

使用Javascript写的2048小游戏

2015/11/25 Javascript

详解vuejs之v-for列表渲染

2017/06/22 Javascript

js指定步长实现单方向匀速运动

2017/07/17 Javascript

详解Vue源码之数据的代理访问

2018/12/11 Javascript

JS尾递归的实现方法及代码优化技巧

2019/01/19 Javascript

小程序如何在不同设备上自适应生成海报的实现方法

2019/08/20 Javascript

vuex中store存储store.commit和store.dispatch的用法

2020/07/24 Javascript

vue中父子组件的参数传递和应用示例

2021/01/04 Vue.js

[03:33]TI9战队采访 - Infamous

2019/08/20 DOTA

Python备份Mysql脚本

2008/08/11 Python

Python字符串的encode与decode研究心得乱码问题解决方法

2009/03/23 Python

Python中关于使用模块的基础知识

2015/05/24 Python

Python中防止sql注入的方法详解

2017/02/25 Python

python爬虫正则表达式使用技巧及爬取个人博客的实例讲解

2017/10/20 Python

django将网络中的图片,保存成model中的ImageField的实例

2019/08/07 Python

django 自定义过滤器(filter)处理较为复杂的变量方法

2019/08/12 Python

python paramiko远程服务器终端操作过程解析

2019/12/14 Python

python二维图制作的实例代码

2020/12/03 Python

详解win10下pytorch-gpu安装以及CUDA详细安装过程

2021/01/28 Python

实例教程利用html5和css3打造一款创意404页面

2014/10/20 HTML / CSS

幼师自荐信

2013/10/26 职场文书

保密工作承诺书

2014/08/29 职场文书

群众路线领导班子四风对照检查材料

2014/09/27 职场文书

2015公务员试用期工作总结

2014/12/12 职场文书

2015年大学班长个人工作总结

2015/04/24 职场文书

2015年党务公开工作总结

2015/05/19 职场文书

2016基督教会圣诞节开幕词

2016/03/04 职场文书

关于党风廉政建设宣传教育月的活动总结！

2019/08/08 职场文书

Go语言-为什么返回值为接口类型,却返回结构体

2021/04/24 Golang