三目运算的多目运算技巧（三种及三种以上的状态怎么使用）

最新推荐文章于 2023-06-06 17:43:53 发布
最新推荐文章于 2023-06-06 17:43:53 发布
阅读量2.8k 收藏 7
点赞数 3
分类专栏： 前端js,css
本文为博主原创文章，未经博主同意不得转载
本文链接：https://blog.csdn.net/qq_38215042/article/details/106850089
版权

1：使用场景，当有人一提到三目运算就会想着用0，1代表男女等的显示问题，只有两种状态值。但你有没有想过当状态不止两种的时候，比如三种及以上的时候，也可以使用三木运算呢？答案是可以。

比如常用的vue数据渲染的时候

 <div class="BottomRight">
      {{val.deviceState==0?"未知":val.deviceState==1?"注册":val.deviceState==2?"注销":""}}
</div>
itfallrain
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
浅谈Java三目运算
09-03
本文给大家主要介绍的是java中三目运算的详细介绍，并附上2个示例，希望对大家理解三目运算能够有所帮助。
uniapp、uView——复选框的使用（使用星期为例）、三目运算、push、forEach遍历方法
努力、拼搏、奋进
10-11 3102
uniapp、uView——复选框的使用（使用星期为例）、三目运算、push、forEach遍历方法
uniapp——三元运算（绑定动态数据）--视图层接入函数
wy313622821的博客
12-09 8658
1、三目运算 a、正常的三目运算符 a=='1’表达式：为真就返回‘2’，为假就返回‘5’ a=='1' ? '2' : '5' b、在class中使用三目运算符 <view :class="[a=='1' ? 'blue' : 'green']">三目运算符</view> 2、视图层接入函数 当我们在视图层使用三目运算都不能满足要求的时候，我们就必须要采用接入函数，返回更多的值，比如：当状态是1，返回颜色#111；当状态是2，返回颜色#222；当状态是3，返回颜色#333 &l
js多目运算符的判断写法
最新发布
记录本人工作中遇到的问题、经验总结以及分享。
06-06 401
【代码】js多目运算符的判断写法。
uni-app 三目运算改变class 设置不同的样式
samHuangLiang的博客
07-31 2153
<view :class="[disabledCode==true?'code_text_tap':'code_text']" @tap="onSendCode" :disabled="disabledCode">{{codeText}}</view> :class="[disabledCode==true?'code_text_tap':'code_text']"
uniapp 验证码倒计时
m0_47104939的博客
11-19 1036
方法：用三目运算符 if为true即captchaTime为0时，可以获取验证码 点击获取验证码后用计时器倒计时，同时动态改变captchaTime的值，显示计时效果。 如果倒计时还未结束，用户点击则提示，不能重复获取 <view class="sendCaptcha"> <view class="verticalLine"></view> <view class="cap-text" @click="se...
三目运算符/多目运算符（多个条件）
热门推荐
忘川
05-07 1万+
const i = 3; const value = i === 1 ? "111" : i === 2 ? "222" : i === 3 ? "333" : i === 4 ? "444" : "555"; console.log(value);//333
三目运算符的多层嵌套
个人笔记
09-01 2497
嵌套语法： 条件1?值1或操作1: //如果满足条件1，就返回值1或执行操作1条件2?值2或操作2: //否则，如果满足条件2，就返回值2或执行操作2以此类推进行多条件嵌套。这样做有个弊端，就是当你拿本对象直接当做入参时，对象里会多出来两个入参（可能会影响响应结果，当然也可能不影响）三目运算符的基础用法是二选一，当我们想多选一时就可以利用三目运算符的多层嵌套来完成（可以替代if多层判断）其实我们可以在渲染数据时利用三木云算符进行判断。根据不同的条件，执行不同的操作/返回不同的值。当时进行先处理数据后渲染。.
Vue 元素绑定多个class，class和style三目运算
weixin_43484014的博客
01-13 1709
1.绑定多个class :class="[(item.type == 'node' ? 'imageMap' : 'imageArrow'), (canNotSelectHops ? 'img-readonly' : 'img-operate')]" 2.class三目运算 :class="[item.type == 'node' ? 'imageMap' : 'imageArrow']" 3.style三目运算 :style="{cursor: item.type == 'arrow' ? 'defa
图解：多目运算原理
Jooan的博客
07-11 176
图解多目运算
三目运算符的多重叠加
weixin_45932157的博客
06-23 754
Python中实现三目运算的方法
09-21
主要介绍了Python中实现三目运算的方法,本文用and/or运算符模拟实现三目运算,需要的朋友可以参考下
Java三目运算中隐藏的自动拆装箱
08-26
主要介绍了Java三目运算中隐藏的自动拆装箱,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
使用Python的判断语句模拟三目运算
12-24
下面说的和三目运算有点相似,但又不一样,实在不知道该如何拟定标题,先就是这个标题吧,大家都知道python中没有三目运算,但是and/or有点类似三目运算: and/or 单独使用表示逻辑关系与和或,也可以组和使用,用法如下 and...
JS switch判断 三目运算 while 及 属性操作代码
10-19
主要介绍了JS switch判断 三目运算 while 及 属性操作代码,需要的朋友可以参考下
uniapp request:fail invalid url “““,uniapp 请求接口封装
weixin_43118088的博客
05-21 2209
uniapp request:fail invalid url “”" 我把uniapp请求接口分装了一下，为了考虑很多的场景，分装的稍微和平常见的有点差别， import serviceUrl from '../server.js' function params(json) { if (!json) return '' return cleanArray( Object.keys(json).map(key => { if (json[key] === und
uni-app基础知识
wzy199982的博客
11-28 2191
uni-app的基础知识、关于uni-app、uni-app使用的准备工具、新建uni-app项目、运行到多端、以及多端的配置方法、复习vue的语法、uni-app的生命周期、uni-app的组件、uni-app的路由、uni-app的条件编译
uni-app实现获取验证码的倒计时
Laladoge的博客
06-15 2395
实现的效果 页面部分是一个三目运算，codeTime是倒计时的时间。 <template> <view> <view class="three"> <view class="get" @tap="getCheckNum()"> <text>{{!codeTime?'获取验证码':codeTime+'s'}}</text> </view> <view class="al.
2022年9月前端学习笔记
weixin_48894212的博客
09-01 2376
技术：vue3、typescript、uni-app、vuex、axios、css
vue多个三目运算
05-30
你可以在Vue中使用多个三目运算符来根据不同的条件渲染不同的内容。以下是一个示例： ``` <template> <div> <p>{{isLoggedIn ? '您已登录' : '请登录'}}</p> <button v-if="isLoggedIn" @click="logout">退出登录</button> <button v-else-if="isLoading">加载中...</button> <button v-else @click="login">登录</button> </div> </template> <script> export default { data() { return { isLoggedIn: false, isLoading: false } }, methods: { login() { // 登录逻辑 }, logout() { // 退出登录逻辑 } } } </script> ``` 在这个示例中，我们使用了三个三目运算符来根据不同的条件渲染不同的内容： - 第一个三目运算符用于显示登录状态。 - 第二个三目运算符用于显示加载状态。 - 第三个三目运算符用于显示登录按钮。 当`isLoggedIn`为`true`时，显示退出登录按钮；当`isLoading`为`true`时，显示加载中按钮；否则，显示登录按钮。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值