前端三元判断

已于 2022-09-02 09:39:25 修改
阅读量1.2k 收藏 1
点赞数
分类专栏： vue 文章标签： 前端 javascript 大数据
于 2020-06-08 10:19:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MistShown/article/details/106613325
版权

三元判断是用的挺多的一项技能，之前项目需求中，有用到过三元判断

直接上案例

//三元判断使用哪个样式
:class="item.state=='条件1'?'样式1' : item.state=='条件2'?'样式2':item.state=='条件3'?'样式3':item.state=='条件4'?'样式4': item.state=='条件5'?'样式5': item.state=='条件6'?'样式6':item.state=='条件7'?'样式7':item.state=='条件8'?'样式8':item.state=='条件9'?'样式9': item.state=='条件10'?'样式10':''"

如果条件很多的情况下建议定义方法代替三元会更简洁 例如

//视图
最低0.47元/天 解锁文章
想个名字想老半天
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 样式切换及三元判断样式关联操作
12-28
假设有需求： 后台返回状态1:启用，0：禁用 1、若要使启用为绿色，禁用不添加其他样式 <el prop=statusName align=center label=状态> <template slot-scope=scope> <div class={active:scope.row.status> {{ scope.row.statusName }} </div> </template> </el> .active{ color:green; } 1、若要使启用为
题5——三元判断
xinpz的博客
04-17 244
/* * 题目5：利用条件运算符的嵌套来完成此题：学习成绩=90分的同学用A表示，60-89分之间的用B表示，60分以下的用C表示。 * 1.程序分析：(a>b)?a:b这是条件运算符的基本例子。 */ public static void main(String[] args) { System.out.println("请输入N的值："); ...
三元运算符多条件判断 判断背景色 css样式
qq_43432157的博客
03-18 3158
<div class="flag-c" :style="{'background':dataList.flag == 0 ? '#00b47c':(dataList.flag == 1) ?'#007ce6':(dataList.flag == 2) ?'#da3f3f': ''}"> <div class="flag-d" style="font-size: 22px;color: #fff;">{{dataList.tvoc}}</div> <div c
CSS中写三元运算符判断设置样式
最新发布
qq_43378240的博客
10-17 436
这里用一个el-icon来设置样式。可以用来动态设置style。
工作307:三元运算符进行判断
歌谣的博客
12-31 265
</div> <div style="display: flex;flex-direction: column;justify-content: left;text-align: center"> <div style="font-size: 12px;background-color: #ccc;">{{ acc.platform }}</div> .
Vue前端性别多重判断问题（男、女、未知）
yjj1123456的博客
07-06 615
methods事件处理器中。
三元运算符2_Html文件_三元运算符_
09-29
三元运算符，也称为条件运算符，是一种简洁的、基于条件的语法结构，它可以在一行代码中完成简单的条件判断和赋值操作。它的基本形式是：`条件 ? 表达式1 : 表达式2`。如果条件为真，那么表达式1的结果会被执行或...
前端项目-condition.zip
09-03
在前端开发中，条件判断通常涉及到 `if...else` 语句、三元运算符 (`condition ? valueIfTrue : valueIfFalse`) 以及开关案例（`switch`...`case`）等。然而，随着业务逻辑的复杂化，简单的条件判断往往不足以应对...
前端开源库-reshape-expressions
08-30
这个库提供了一种强大而灵活的方式，帮助开发者在代码中修改、优化和重构表达式，包括局部变量、循环结构以及条件判断。在前端开发中，尤其是在大型项目中，对代码进行高效维护和优化是非常重要的，reshape-...
前端开源库-meteor-spacebars
08-30
5. **三元操作符（Ternary Operator）**：`{{#if}}`和`{{else}}`可以用来实现条件渲染，相当于JavaScript的三元运算符。 6. **助手链（Helper Chaining）**：可以通过串联多个助手来处理复杂逻辑，如`{{myHelper ...
三元运算符：
linlinaitangtang的博客
03-29 1245
语法：返回值=判断公式？结果1：结果2；判断公式=一个返回布尔值的公式。 结果1：公式返回的是true; 结果2：公式返回的是false。 not a number ：非数字, 2:字符串， (+)=字符串，一个(=)为赋值 （==）的值为相等，===的值相等类型相等。 3：比较运算法。 例如：conlase.log（5>8）;//则为不成立。（false） conlase.log （5<8）;//则为成立。（true） conlase.log （5<=8）;则为成立。（t
TP5 模板输出之三元运算符使用
Yan 小铁匠
09-16 4825
模板可以支持三元运算符，例如： {$status? '正常' : '错误'} {$info['status']? $info['msg'] : $info['error']} {$info.status? $info.msg : $info.error } 5.0版本还支持如下的写法： {$varname.aa ?? 'xxx'} 表示如果有设置$varname则输出$varname,否则输出...
小程序三元参数判断
qq_38026437的博客
09-26 3052
记录一下新手容易弄混的 多次三元比较 其实就是 if else 的简写，true 就是 ←     false 就是 → 例子： css .cr{ color: red; } .cb{ color: blue; } .cy{ color: yellow; } html: &lt;view class='{{ c1 ? "cr":"cb"}}'&gt; c1有值 &lt...
三元运算符
vcvcttt的博客
05-05 910
三元运算符 用来完成简单的选择逻辑，即根据条件判断，从两个选择中选择一种执行。 使用格式： (条件表达式)？表达式1：表达式2； 运算规则： a) 判断条件表达式，结果为一个布尔值。 b) true，运算结果为表达式1 c) false，运算结果为表达式2 如： int a = 10;  int b = 20; a==b?10:20; 结果为20
前端三元表达式解释
weixin_42163123的博客
02-28 214
三元表达式解释
JavaScript之三元运算符
流年
06-03 3万+
三元条件运算符 格式： 表达式1?表达式2:表达式3 说明：如果表达式1为true ，则整个表达式的结果就是表达式2的值，如果表达式false，则整个表达式的结果就是表达式3的值. 例子： 1、使用三元运算符计算2个数的最大值 var a,b,c; a=window.prompt("第1个数");//从页面中接受的是字符串 b=window.prompt("第2个数");
js“三元表达式” （三元运算符）
热门推荐
gogaogao的博客
12-14 5万+
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/liu_jiachen/article/details/73251172 前言 各位大神，大家好，相约周三。我们又见面了。 众所周知，三元表达式在代码量上比if…else语句更简洁一些。但是博主在可读性上更加偏向于if…else语句。三元表达式不仅在js中使用，在很多后台程序语言，比如java、php中都有使用，不过在js中对于三元表达式的要求貌似
java前端有三元表达_简单聊聊JS里的三元运算符
weixin_39716800的博客
03-01 321
简单聊聊JS里的三元运算符。三元条件运算符格式： 表达式1?表达式2:表达式3说明：如果表达式1为true ，则整个表达式的结果就是表达式2的值，如果表达式false，则整个表达式的结果就是表达式3的值.例子：1、使用三元运算符计算2个数的最大值vara,b,c;a=window.prompt("第1个数");//从页面中接受的是字符串b=window.prompt("第2个数");c=Numb...
前端三元表达式根绝后端返回的四种不同的状态判断显示不同的内容
05-27
可以使用前端的三元表达式来根据后端返回的不同状态来显示不同的内容。假设后端返回的状态码为status，我们可以这样写： ```javascript {status === 200 ? 请求成功</p> : status === 404 ? 请求的资源不存在</p> :...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值