目录如何巧用三元表达式三元表达式的巧妙使用:class=“ “的三元表达式写法如何巧用三元表达式 一开始我并不喜欢阅读别人的代码，话说程序员最讨厌的事：写代码
一开始我并不喜欢阅读别人的代码，话说程序员最讨厌的事：写代码要写文档、写代码要写注释、别人的代码没有文档、别人的代码没有注释。后来发现阅读别人的代码虽然很枯燥，但是很锻炼逻辑思维，而且还能学到很多东西，比如我下面要说的这个：
在某天（其实具体是哪天我也忘了），我在阅读别人的代码时发现一串三元表达式，感觉很6，像是打开新世界的大门一样，顿时感觉只有你想不到的，没有别人做不到的。真的是活到老学到死啊。
下面上代码：
<span
v-for="$index in circles"
class="circle"
:style="{
backgroundColor: activeIndex == $index ? pagerColor : pagerBGColor,
opacity:
pagerColor == pagerBgColor
? activeIndex == $index
? '1'
: '0.4'
: '1'
}"
:key="$index"
></span>这代码扫一眼看着没毛病啊，就是遍历渲染数据，但是其中三元表达式的使用真的是6到飞起。可能有些大佬一看，有点鄙视我，“垃圾，就一个三元表达式，大惊小怪”，但是我是头一次看到这么写的。其实好多东西不是不会写，而是想不到。就像这个三元表达式，让谁写谁都能写出来，但是就是想不到可以这么写。这也是阅读别人代码的一个好处，可以学到一些骚操作，让自己少写代码，提高工作效率。
回头再说这个三元表达式，我们正常使用三元表达式是这样的：
表达式 (expr1) ? (expr2) : (expr3)
在 expr1 求值为 TRUE 时的值为 expr2，在 expr1 求值为 FALSE 时的值为 expr3。
而上面代码中把表达式中的值又设为一个表达式，满足条件的时候执行表达式再次判断求值，将三元表达式写成了类似于if判断的东西，减少了代码量而且还增加更加容易读懂
<div class="stepbar">
<div class="stepbar-first"></div>
<div class="stepbar-first-line"></div>
<div v-if="item.applyState===5" class="stepbar-gray"></div>
<div v-else :class="item.applyState===1?'stepbar-red':'stepbar-first'"></div>
<div v-if="item.applyState!==1&&item.applyState!==5" class="stepbar-first-line"></div>
<div v-if="item.applyState!==1&&item.applyState!==4&&item.applyState!==5" :class="item.applyState===2&&item.applyState!==3?'stepbar-red':'stepbar-first'"></div>
<div v-if="item.applyState===4" class="stepbar-gray"></div>
</div>以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
--结束END--
本文标题: vue中巧用三元表达式解析
本文链接: https://lsjlt.com/news/145427.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0