踩坑——写三目请务必加上括号

今天在写业务逻辑判断的时候,实实在在地踩了一个坑,特此记录一下。

把代码中的具体业务抽离一下,大概是这样的:

let flag = 0 === false &&
           1 == true && 
           '' == false ? false : true

问,flag 的值是多少?

当然,如果你开发经验丰富的话,很容易看出结果是多少。

先说说我踩坑的思路:

  1. 首先,&& 运算符,是有一种短路效果的,也就是说多个 && 运算符同时出现的话,如果前面有一个 false,那么后面的 && 就不会判断了,相信这一点,大家都知道
  2. 于是乎,我就得出了答案,因为0 === falsefalse,所以,后面的就不会再判断了,所以 flag 的值就为 false

但很明显,我错了,后面还有个三目运算符啊。。。

在三目运算符看来0 === false && 1 == true && '' == false ? false : true 中的 0 === false && 1 == true && '' == false 是一个整体。
所以,前面的整体为false,所以经过三目之后,得到的结果就为true
在这里插入图片描述

如果给三目加上括号,结果就相反了:

在这里插入图片描述

所以,长个教训,以后写这种逻辑运算符,并且有点长的时候,一定一定要加括号,因为指不定就会出现一些你预想不到的情况,到时候又得调试半天。

### Vue3 中使用三目运算符作为参数的示例及语法 在 Vue3 中,三目运算符可以用于动态绑定属性、样式或事件等场景。以下是具体的用法和示例。 #### 动态绑定 `:style` 属性 三目运算符可以用来根据条件动态设置内联样式。例如,以下代码展示了如何根据 `type` 和 `index` 的值切换背景图片: ```html <div :style="type == index ? {backgroundImage: 'url(' + urls + '/app/index/catbj2.png' + ')'} : {backgroundImage: 'url(' + urls + '/app/index/catbj1.png' + ')'}" > </div> ``` 上述代码中,当 `type` 等于 `index` 时,背景图片会切换为 `catbj2.png`;否则为 `catbj1.png`[^4]。 #### 动态绑定 `:class` 属性 三目运算符也可以用于动态绑定类名。例如,以下代码展示了如何根据条件切换类名: ```html <div :class="isActive ? 'active-class' : 'inactive-class'" ></div> ``` 如果 `isActive` 为真,则应用 `active-class`;否则应用 `inactive-class`[^2]。 #### 在 `v-if` 或 `v-else` 中结合三目运算符 虽然三目运算符可以直接用于动态绑定,但有时结合 `v-if` 和 `v-else` 可以让代码更具可读性。例如: ```html <div v-if="condition">Condition is true</div> <div v-else>Condition is false</div> ``` 这与以下代码功能相同: ```html <div>{{ condition ? 'Condition is true' : 'Condition is false' }}</div> ``` #### 复杂条件下的三目运算符 对于多个条件的判断,可以嵌套使用三目运算符。例如: ```html <span> {{ key == 1 ? '我爱你' : key == 2 ? '我喜欢你' : key == 3 ? '我恨你' : '我讨厌你' }} </span> ``` 上述代码中,根据 `key` 的值显示不同的文本内容[^2]。 #### 注意事项 1. 三目运算符适合简单的条件判断,复杂逻辑建议提取到方法或计算属性中。 2. 使用三目运算符时需注意优先级问题,必要时添括号明确优先级。 #### 示例代码:结合计算属性 为了提高代码可维护性,复杂的三目运算可以放在计算属性中: ```javascript <script> export default { data() { return { key: 2, urls: 'https://example.com' }; }, computed: { message() { return this.key == 1 ? '我爱你' : this.key == 2 ? '我喜欢你' : this.key == 3 ? '我恨你' : '我讨厌你'; }, backgroundImage() { return this.type == this.index ? `url(${this.urls}/app/index/catbj2.png)` : `url(${this.urls}/app/index/catbj1.png)`; } } }; </script> <template> <div> <span>{{ message }}</span> <div :style="{ backgroundImage: backgroundImage }"></div> </div> </template> ``` 上述代码将三目运算逻辑封装到计算属性中,使模板更简洁[^4]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值