快捷導(dǎo)航

vue中巧用三元表達式解析

更新時間：2022年04月09日 09:10:43 作者：從人到猿

這篇文章主要介紹了vue中巧用三元表達式解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

如何巧用三元表達式

一開始我并不喜歡閱讀別人的代碼，話說程序員最討厭的事：寫代碼要寫文檔、寫代碼要寫注釋、別人的代碼沒有文檔、別人的代碼沒有注釋。后來發(fā)現(xiàn)閱讀別人的代碼雖然很枯燥，但是很鍛煉邏輯思維，而且還能學(xué)到很多東西，比如我下面要說的這個：

三元表達式的巧妙使用

在某天（其實具體是哪天我也忘了），我在閱讀別人的代碼時發(fā)現(xiàn)一串三元表達式，感覺很6，像是打開新世界的大門一樣，頓時感覺只有你想不到的，沒有別人做不到的。真的是活到老學(xué)到死啊。

下面上代碼：

<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到飛起。可能有些大佬一看，有點鄙視我，“垃圾，就一個三元表達式，大驚小怪”，但是我是頭一次看到這么寫的。其實好多東西不是不會寫，而是想不到。就像這個三元表達式，讓誰寫誰都能寫出來，但是就是想不到可以這么寫。這也是閱讀別人代碼的一個好處，可以學(xué)到一些騷操作，讓自己少寫代碼，提高工作效率。

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

表達式 (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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: