vue进行判断使用class_vue 动态添加class,三个以上的条件做判断方式

vue 动态添加class,三个以上的条件做判断方式

如果 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

我就废话不多说了，大家还是直接看代码吧~

以上这篇vue 动态添加class,三个以上的条件做判断方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

时间： 2020-10-30

本文实例讲述了vue动态绑定class的几种常用方式.分享给大家供大家参考,具体如下: 对象方法 最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染) :class="{ 'active': isActive }" 判断是否绑定一个active :class="{'active':isActive==-1}" 或者 :class="{'active':isActive==index}" 绑定并判断多个 第一种(用逗号隔开) :

需求:根据特定条件,增加或者去掉click事件(例如:clickFlag == true时,添加click事件:clickFlag == false时,去掉click事件:) 解决方法: 方式一:在绑定事件中直接添加标示量clickFlag

添加产品

方式二:用v-if .v-else-if.v-else 判断

vue 动态添加class类名,灵活得让你发狂,下面示例几个

动态添加类名

查岗视频

本文实例讲述了C#中GridView动态添加列的实现方法.分享给大家供大家参考.具体如下: protected void Page_Load(object sender, EventArgs e) { TemplateField mycustomField = new TemplateField(); //创建列实例 mycustomField.ShowHeader = true; // 设置属性 LinkButton lb = new LinkButton(); lb.Text = "Dele

本文实例讲述了Android viewpager中动态添加view并实现伪无限循环的方法.分享给大家供大家参考,具体如下: viewpager的使用,大家都熟悉,它可以实现页面之间左右滑动的切换,这里有一个需求,就是viewpager里面加载的页数不是确定的,而是根据数据的多少来确定的.常见的应用就是在一个新闻的详细页面中,显示与此新闻有关的图片. 下面我们来看一下代码: activity_main.xml

本文实例讲述了vue中动态select的使用方法.分享给大家供大家参考,具体如下: html代码如下: 通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容

先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,

几乎在所有浏览器中,都具有 Tab 键切换焦点的功能. 但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能. 为了交付上线拿到钱,我们只好再一次毫无原则性的接受了客户的需求. 在上一代人中,大多都有这种操作习惯.习惯把保存成为编辑,习惯用回车替换 Tab.这是受到微软 excel 荼毒的结果. 起初我以为这个功能很简单,无非就是把 Enter 键的功能转接到 Tab 键上面,分分钟就可以解决掉的问题. 可困难马上就出现了,我发现这条路是走不通的. 我们经常可以主动触发某个事件,比如 e

大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码