HTML根据条件判断使用哪个class-name

最新推荐文章于 2021-06-20 05:29:39 发布
最新推荐文章于 2021-06-20 05:29:39 发布
阅读量1k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chao_ji_cai/article/details/117652693
版权

在v-for循环语句中，想根据后端传来的list的某个值来指定不同的class

:class="{'fd-step-blue':item.zt == 1,
'fd-step-green':item.zt==2,
'fd-step-red':item.zt==3,
'fd-step-grey':item.zt==0,
'fd-step':index != dzsjdclcList.length-1,
'fd-step-last':index == dzsjdclcList.length-1}"
偷偷写博客567
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML技术文档
07-25
新手资源，可以学习一下html， <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link href="../css/mainpage.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="../css/tabs.css" /> <title>注册页面</title> <style type="text/css"> .STYLE5 {font-size: 36px} </style> </head> <body>     [removed] //sNameCheck() && passCheck() && bdaycheck() function validateform(){ if(sNameCheck() && passCheck()&&bdaycheck;()) return true; else return false; } // Login Name Validation function sNameCheck(){ var strName = document.userfrm.sname.value; if(strName.length != 0) { return true; } else { alert("请输入用户名"); return false; } } function passCheck(){ var userpass = document.userfrm.pass.value; var ruserpass = document.userfrm.rpass.value; if(userpass == "" && ruserpass == ""){ alert("未输入密码 \n" + "请输入密码"); document.userfrm.pass.focus(); return false; } if(userpass.length < 6){ alert("密码必须多于或等于 6 个字符。\n"); document.userfrm.pass.focus(); return false; } else if(userpass != ruserpass){ alert("两次输入的密码不一致"); document.userfrm.rpass.select(); return false; } return true; } function bdaycheck(){ var bmonth = document.userfrm.bmon.value; var bday = document.userfrm.bday.value; var byear = document.userfrm.byear.value; if (bmonth == "" || bday == "" || byear == "" || bday == "dd" || byear == "yyyy") { alert("请输入您的生日"); document.userfrm.bmon.focus(); return false; } for (i = 0; i < bday.length; i++) { var bnum = bday.substring(i,i+1) if (!(bnum 0)) { alert("日期无效"); document.userfrm.bday.focus(); return false; } } if(byear.substring(0,1)==2&&byear;.substring(1,2)==0) //年份必须以20打头 { for (j = 2; j < byear.length; j++) { var bynum = byear.substring(j,j+1); if (!(bynum 0)) { alert("年份无效"); document.userfrm.byear.focus(); return false; } } } else { alert("年份必须以20打头"); return false; } if (byear 2120) { alert("您输入的出生年份超出范围！\n请重新输入！"); document.userfrm.byear.focus(); return(false); } else if (bmonth 12) { alert("您输入的月份超出范围！\n请重新输入！"); document.userfrm.bmon.focus(); return(false); } else if (bday 31) { alert("您输入的日期超出范围!\n请重新输入！"); return(false); } return true; } [removed] <form name="userfrm" method="post" action="register_success.htm" validateform( )"> 登录名： <input name="sname" type="text" class="register_textBroader" id="sname" size="24">（可包含 a-z、0-9 和下划线） 密码： <input name="pass" type="password" class="register_textBroader" id="pass" size="26"> （至少包含 6 个字符） 再次输入密码： <input name="rpass" type="password" class="register_textBroader" id="rpass" size="26"></td> 出生日期： <input name="byear" class="register_textBroader" id="byear" value="yyyy" size=4 maxlength=4 > 年   [选择月份] 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月  月   <input name="bday" class="register_textBroader" id="bday" value="dd" size=2 maxlength=2 >日 <input type="reset" name="Reset" value=" 重 填 "></td> <input type="submit" name="Button" value="同意以下服务条款，提交注册信息"></td> </form> </body> </html>
JavaScript 判断 html 元素是否包含某个类名 class（3种方式）
热门推荐
雷佳佳的博客
03-11 2万+
第一种方法（HTML5中的classList API） 如果不考虑兼容IE10以下的话，可以用HTML5中的classList API，非常方便： var node = document.getElementById('element'); if(node.classList.contains('test')){ console.log('包含 test 这个class'); } 第二个...
html中判断语句
weixin_44320200的博客
11-24 6317
html中判断语句 <tr> <td class='label'>进场日期</td> <td class="layui-input-block">{{dateUtils.format(d.startDate,'yyyy-MM-dd')||''}}</td> <td class='label'>人员状态</td> <td>{{d.personStatus=='1'?'进场':'退场.
html判断是否有某个元素,JS基础篇--如何用JavaScript判断dom是否有存在某class的值？...
weixin_39648430的博客
06-11 384
例如：判断html节点的class是否有no-js。1.jquery的实现方式$("html").hasClass('no-js');jquery源码的实现方式：var rclass = /[\t\r\n\f]/g;jQuery.fn.extend({hasClass: function(selector) {var className = " " + selector + " ",i = 0,l...
ng-class中的if else判断
程序猿成长之路
02-10 1万+
来自于stackoverflow的一个问题，自己刚好用到，搬过来做个标记。原问题链接 在使用ng-class时，有些时候会碰到根据是否满足条件来设置元素的样式，使用以下方法可以达到这样的目的。 （1）使用运算符 这样写无需在javascript中添加额外代码，但是需要注意的是要让代码具有良好的可读性。 （2）使用额外的方法 然后使用以下的代码：  $scope.setS
html中class设置判断,jquery如何判断是否存在指定class（类）？
weixin_39600400的博客
06-20 928
在jquery中，可以使用hasClass()方法来判断元素中是否存在指定class(类)。下面本篇文章就来给大家介绍一下jquery hasClass() 方法，希望对大家有所帮助。hasClass() 方法检查被选元素是否包含指定的 class。如果被选元素包含指定的类，该方法返回 "true"，否则返回false。语法$(selector).hasClass(class)参数：class：必...
给html里面的class添加一个判断语句，判断当前class是否显示（vue）
weixin_30955617的博客
12-18 1609
当我们想判断这个class是否出现时，其实有很多方法， 我这个是做了一个选项卡，当点击的时候navTitle的值和循环的item的值相同时class就等于borderbottom, 这样我们点击的图层的颜色就可以给class添加相信的background-color 转载于:https://www.cnblogs.com/putao1/p/10138372.html...
根据条件判断使用不同的class
乐天小葵
01-05 2723
标题大小与字体大小的关系
Guo_Elleny的博客
09-27 829
1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。 <h1>这是1号标题</h1> <font size="6">这是6号字体文本</font> <h2>这是2号标题</h2> <font size="5">这是5号字体文本</font> <h3>这是3号标题</h3> <font size="4">这是4号字体文本</font&gt
循环数据根据数据不同显示不同的class样式.html
weixin_30588827的博客
02-13 817
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>指令</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"&gt...
HTML中的if判断用法
01-19
在django的web开发过程中，编写html时，从后端传入同名列表变量，但是内容格式有所区别，需要分别判断，查阅了很多文章试了好几种方法，格式似乎都不太对（本人没有系统学习过前端，基本都是照葫芦画瓢） ...
前端css+html+布局笔记
09-14
根据元素的class属性值，选中一组元素 语法：.class{} 例子： .hello{} .box{} 通配选择器 选中页面中的所有元素 语法：*{} 通配选择器的性能比较差，尽量避免使用 并集选择器 ...
layui的表单验证支持ajax判断用户名是否重复的实例
01-19
onblur()失去焦点事件，用按钮来手动触发，表单又不太美观，可以使用form表单的verify来进行验证。 html： <div class=layui-form-item> <label class=layui-form-label>用户名 <div class=layui-input-block> &...
Spring.html
03-23
ClassPathXmlApplicationContext:使用这个工厂创建对象,他会根据scope智能判断是否懒加载,如果是单例则创建容器时就会创建里面bean的实例,如果是多例在获取使用时才会创建bean实例 ...
jquery 必填项判断表单是否为空的方法
12-11
html页面 代码如下:<form onsubmit=”if...input type=”text” name=”sendto_type[]” id=”sendto_type1″ value=”1″ >按城市发送 </td> </tr> <tr> 选择发送人2<font class=”red”>*</font></td> <
e语言-易语言操作数据教程之ACCESS实战视频教程
08-23
http://www.w3school.com.cn/sql/index.aspSQL语句:添加:INSERT INTO table_name (id, 列2,...) VALUES (0, 值2,....)更新:UPDATE class SET name = QQ2013 WHERE id = 1删除:DELETE FROM class WHERE id = 1查询:...
jquery判断RadioButtonList和RadioButton中是否有选中项示例
01-19
代码如下: <pre class=”html” name=”code”> <%–Body 代码–%> <div> ”RadioButtonList1″ runat=”server”> ”A”>a</asp> ”B”>b</asp> </asp> <asp:RadioButton ID=”RadioButton1″ GroupName=...
jqueyr判断checkbox组的选中(示例代码)
12-11
html: 代码如下:  ”right”>  ”left” colspan=”3″> <input type=”checkbox” class=”checkboxListItem” name=”checkItem” value=”3″ id=”slsa_approval” />批准 <i
mall-xiaohongshu-小程序模仿小红书.zip
09-23
e.detail.value.name){ //判断输入内容  warn = "请填写收件人！";  } else if(!e.detail.value.tel){  warn = "请填写手机号码！";  } else if(!(/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.tel)...
vxe-table header-class-name的使用
最新发布
12-15
下面是一个使用header-class-name属性的例子： ```html <vxe-table :data="list" ref="xTable" class="mytable" :header-class-name="headerClassName"> <vxe-table-column type="seq" width="60"></vxe-table-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值