<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>

這代碼掃一眼看著沒毛病啊，就是遍歷渲染數(shù)據(jù)，但是其中三元表達式的使用真的是6到飛起?？赡苡行┐罄幸豢矗悬c鄙視我，“垃圾，就一個三元表達式，大驚小怪”，但是我是頭一次看到這么寫的。其實好多東西不是不會寫，而是想不到。就像這個三元表達式，讓誰寫誰都能寫出來，但是就是想不到可以這么寫。這也是閱讀別人代碼的一個好處，可以學到一些騷操作，讓自己少寫代碼，提高工作效率。

回頭再說這個三元表達式，我們正常使用三元表達式是這樣的：

表達式 (expr1) ? (expr2) : (expr3)

在 expr1 求值為 TRUE 時的值為 expr2，在 expr1 求值為 FALSE 時的值為 expr3。

而上面代碼中把表達式中的值又設(shè)為一個表達式，滿足條件的時候執(zhí)行表達式再次判斷求值，將三元表達式寫成了類似于if判斷的東西，減少了代碼量而且還增加更加容易讀懂

:class=“ “的三元表達式寫法

<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>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: