快捷導(dǎo)航

vue中巧用三元表達(dá)式解析

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

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

如何巧用三元表達(dá)式

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

三元表達(dá)式的巧妙使用

在某天（其實(shí)具體是哪天我也忘了），我在閱讀別人的代碼時(shí)發(fā)現(xiàn)一串三元表達(dá)式，感覺很6，像是打開新世界的大門一樣，頓時(shí)感覺只有你想不到的，沒有別人做不到的。真的是活到老學(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ù)，但是其中三元表達(dá)式的使用真的是6到飛起?？赡苡行┐罄幸豢?，有點(diǎn)鄙視我，“垃圾，就一個(gè)三元表達(dá)式，大驚小怪”，但是我是頭一次看到這么寫的。其實(shí)好多東西不是不會(huì)寫，而是想不到。就像這個(gè)三元表達(dá)式，讓誰寫誰都能寫出來，但是就是想不到可以這么寫。這也是閱讀別人代碼的一個(gè)好處，可以學(xué)到一些騷操作，讓自己少寫代碼，提高工作效率。

回頭再說這個(gè)三元表達(dá)式，我們正常使用三元表達(dá)式是這樣的：

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

在 expr1 求值為 TRUE 時(shí)的值為 expr2，在 expr1 求值為 FALSE 時(shí)的值為 expr3。

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

:class=“ “的三元表達(dá)式寫法

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

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

您可能感興趣的文章: