vue三元运算符,vue动态样式三元表达式

　　本文主要介绍了三值表达式分析在vue中的巧妙运用，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　如何巧用三元表达式：class=" "三元表达式写作

如何巧用三元表达式

　　一开始不喜欢看别人的代码，说程序员最讨厌：写代码需要文档，写代码需要注释，别人的代码没有文档，别人的代码没有注释。后来发现看别人的代码很无聊，但是锻炼了逻辑思维，可以学到很多东西，比如下面我要说的这个：

三元表达式的巧妙使用

　　有一天(其实我忘了具体哪一天了)，我在看别人的代码的时候发现了一串三元表达式。这感觉很好，就像打开了一扇新世界的大门。突然觉得，没有你想不到的，没有别人做不到的。学习死亡真的永远不会太晚。

　　下面上代码：

　　跨度

　　v-for=$index in circles

　　圆圈

　　:style={

　　background color:active index==$ index？page color:pagerBgColor，

　　不透明度：

　　pagerColor==pagerBgColor

　　？activeIndex==$index

　　？1

　　: 0.4

　　: 1

　　}

　　:key=$index

　　/span

　　这段代码一看就没毛病，就是遍历渲染数据，但是三元表达式的使用真的是6飞起来。可能有些大佬看了会有点鄙视我，“垃圾，就一个三元表情，大惊小怪”，但是我还是第一次看到这样写的。其实很多东西不是写不出来，而是想不到。就像这个三元表达式，谁能写就能写，只是我想不到这样写。这也是看别人代码的一个好处。可以学习一些脏操作，这样可以少写代码，提高工作效率。

　　回头再说这个三元表达式，我们正常使用三元表达式是这样的：

　　表达式(expr1)？(表达式2):(表达式3)

　　当expr1的计算结果为TRUE时，该值为expr2当expr1的计算结果为FALSE时，该值为expr3。

　　在上面的代码中，表达式中的值被设置为表达式。当条件满足时，再次对表达式进行判断和求值，将三元表达式写成类似if判断的东西，减少了代码量，更容易阅读。

:class=“ “的三元表达式写法

　　div class=stepbar

　　div class=stepbar-first/div

　　div class= step bar-first-line /div

　　div v-if= item . apply state===5 class= step bar-gray /div

　　div v-else:class= item . apply state===1？step bar-red : step bar-first /div

　　div v-if=item.applyState！==1item.applyState！==5 class= step bar-first-line /div

　　div v-if=item.applyState！==1item.applyState！==4item.applyState！==5 :class= item . apply state===2 item . apply state！==3?step bar-red : step bar-first /div

　　div v-if= item . apply state===4 class= step bar-gray /div

　　/div

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。