vue三元表达式 多条件嵌套

最新推荐文章于 2023-09-12 10:52:52 发布
最新推荐文章于 2023-09-12 10:52:52 发布
阅读量711 收藏 1
点赞数 3
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61482364/article/details/128975334
版权 
公式如下:

判断1 ? 结果1 : 判断2 ? 结果2 : 判断3 ? : 结果3 : 结果不是123的

        this.version = this.version == '定位设备' ? 10 : this.version == '作业设备' ? 20 : this.version == '自动驾驶设备' ? 30 :  this.version,

 希望能够帮到大家 (〃'▽'〃)

~半句晚安。
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
涨芝士:三元运算符里嵌套三元运算符与Vue的template里调用methods的方法
我仰泳一级棒
01-05 1914
背景前提: 某个需求优化,用户头像要做逻辑判断,后端接口返回两个字段,一个字段是userImage(用户自己上传的头像), 另一个是sexImage(性别头像:男和女) 逻辑一: 若userImage有值就直接显示 userImage:‘xxxxx’ 的头像,后面的性别头像就不管了 逻辑二: 前面的 userImage:“ ” ,就取性别头像, sexImage:“man” (男生头像), sexImage：“woman” (女生头像) 逻辑三: 若 usrImage:" " 和 sexImage
vue 三元表达式多条件判断切换class(可无限嵌套)
m0_66523895的博客
07-21 1314
三元表达式多条件判断切换class
vue三元运算之多重条件判断
weixin_44237840的博客
11-03 1477
https://blog.csdn.net/ZiChen_Jiang/article/details/117063088?utm_term=vue%E4%B8%89%E5%85%83%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%A4%9A%E4%B8%AA&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allsobaiduweb~default-1-117063088&spm=3001.4430
vue中的三元表达式
m0_65777697的博客
02-23 8543
vue三元表达式运用
【VUE】三目运算符，多条件判断。
CSDNwangyi的博客
02-13 1545
多个条件判断时的写法。
vue中三元运算， style、class、type、 event等多种场景示例
大剑师兰特的GIS世界
09-12 2819
在vue的项目中，我们经常用三元运算来简化if-else的操作，这样会减少代码量，阅读起来也比较通畅。我们在下面的介绍中，会介绍单条件和多条件的场景，也会介绍style，type，class，event，文本内容中的三元运算示例。
vue 属性 三元表达式
qq_36016297的博客
03-30 5032
在 Vue.js 中，可以使用三元表达式（ternary operator）来根据某个条件动态地设置属性值。同样的，也可以根据条件来动态地设置其他属性，例如。属性时，需要传入一个对象，而不是一个字符串。，我们可以根据它的值来动态地设置。例如，假设有一个布尔类型的数据。是条件为真时要设置的属性值，是条件为假时要设置的属性值。表示要设置的属性名，
vue版corn表达式生成器
10-20
目前该插件有2个参数，isShow用于控制是否初始化插件，initialData用于回显数据到插件上。
VUE多层路由嵌套实现代码
08-30
VUE多层路由嵌套实现代码 VUE多层路由嵌套是一种复杂的路由机制，能够满足复杂的应用场景需求。该实现代码主要是通过定义多个模板和路由对象，然后将其组合起来实现多层路由嵌套。 1. 定义模板 首先，我们需要...
简单了解vue 插值表达式Mustache
10-15
主要介绍了vue 插值表达式Mustache的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
基于vue v-for 多层循环嵌套获取行数的方法
10-17
今天小编就为大家分享一篇基于vue v-for 多层循环嵌套获取行数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element ui el-tag 三元表达式多级条件判断
Hermia_yuan的博客
11-24 1672
element ui el-tag 三元表达式进行多级条件判断
Vue.js基础-03-条件语句（v-if/v-show）
运维玄德公
05-14 2413
文章目录1. v-if1.1 v-if语法示例完整示例1.2 v-else语法示例完整示例1.3 v-else-if语法示例完整示例多个v-else-if 的判断逻辑2. v-show2.1 使用语法示例完整示例2.2 和v-if 比较 1. v-if 1.1 v-if 语法示例 <p v-if="show">甲</p> 完整示例 如下： 如果show是false，则甲不会显示。 如果ok是flase template中 三奇六仪的信息都不会显示 但是show和template
vue动态绑定class和style，三目运算符条件判定
qq_20236937的博客
06-30 1561
vue动态绑定class和style，三目运算符条件判定
vue 差值表达式中使用三元表达式
许洪源的博客
01-05 6494
vue的插值表达式 {{}} 有人叫小胡子语法，也叫双花括号 作用：读取vue中data里的数据，显示在结构中，数据更新，视图也会跟着变化。 vue 差值表达式中使用三元表达式 <span>总开机时间：{{ status.bootTime == null ? 'N/A' : status.bootTime}}</span> data() { return { status:{ bootTime:'' }, }; }
vue绑定多个class 三元运算符 多个条件限制
Emma1314PYT的博客
11-03 3798
vue绑定多个class 三元运算符 多个条件限制 在v-for循环中，根据需求，前3条添加不一样的样式。 第一个第二个第三个分别是不同的样式 <div v-for="(item, index) in msgList" :key="index" :class="[index==0?classA:'',index==1?classAa:'',index==2?classAb:'',index>2?classB:
多个三元的嵌套
c_s_d_na的博客
03-26 2112
三元表达式的嵌套使用 在vue项目中,动态绑定class或style时,常常会用到三元表达式。 三元表达式的普通用法：a = 条件？值1：值2 三元表达式的嵌套用法：a = 条件1？值1 : (条件2？值2 : 条件3？值3：值4) 嵌套写法相当于： if (条件1) { a = 值1； }else if (条件2){ a = 值2； }else if (条件3){ a = 值3； }else { a = 值4； } 最近在一个vue项目中要实现这样的一个效果 ...
ant-design-vue a-table通过字段的状态展示对应的文字，三元表达式多个条件判断，后端返数字，前端展示文字
qq_40055200的博客
02-03 1445
在data的columns中，通过scopedSlots渲染名叫type的插槽。只需要在data的columns中通过customRender 进行。
vue中巧用三元表达式
热门推荐
从人到猿
01-09 2万+
  在程序员的世界里，只有你想不到的，没有别人做不到的，永远不要停止学习的脚步，逆水行舟不进则退。   一开始我并不喜欢阅读别人的代码，话说程序员最讨厌的事：写代码要写文档、写代码要写注释、别人的代码没有文档、别人的代码没有注释。后来发现阅读别人的代码虽然很枯燥，但是很锻炼逻辑思维，而且还能学到很多东西，比如我下面要说的这个： 三元表达式的巧妙使用   在某天（其实具体是哪天我也忘了），我在阅读别...
vue 三元表达式 动态style
最新发布
04-20
Vue的三元表达式和动态style是Vue框架中常用的特性，用于在模板中根据条件动态设置元素的样式。 三元表达式是一种简洁的条件判断语法，它由三部分组成：条件、真值和假值。在Vue中，可以使用三元表达式来根据条件动态设置元素的样式。 例如，假设有一个data属性`isRed`，它的值为布尔类型，表示是否需要将元素的背景色设置为红色。可以使用三元表达式来实现： ```html <div :style="isRed ? 'background-color: red' : ''">这是一个动态样式的元素</div> ``` 上述代码中，`:style`是Vue的绑定语法，用于将样式绑定到元素上。三元表达式`isRed ? 'background-color: red' : ''`表示如果`isRed`为真，则将背景色设置为红色，否则不设置背景色。 除了三元表达式，Vue还提供了更强大的动态样式绑定方式，可以使用对象语法来动态设置多个样式。例如： ```html <div :style="{ backgroundColor: isRed ? 'red' : 'blue', color: isRed ? 'white' : 'black' }">这是一个动态样式的元素</div> ``` 上述代码中，`:style`绑定了一个对象，对象的属性名表示样式属性，属性值表示样式的值。根据`isRed`的值，可以动态设置背景色和文字颜色。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值