您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Vue中怎么避免在動態(tài)綁定類時出現(xiàn)空類”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
傳遞空字符串,這可能會導(dǎo)致 DOM 輸出中的類為空。 在三元運(yùn)算符中,我們可以返回"null",這可以確保 DOM 中沒有空類?
<!-- ? --> <div :class="isBold ? 'bold' : ''"> <!-- <div class> --> <!-- ? --> <div :class="isBold ? 'bold' : null"> <!-- <div> --
''
我們使用三元運(yùn)算符根據(jù)isBold
是true
還是falsy
來有條件地設(shè)置適當(dāng)?shù)念悺?在下面示例中,如果isBold
是 真值
,類就被設(shè)置為bold
。 如果是虛值
的,它將返回一個空字符串''
。
html
<div :class="isBold ? 'bold' : ''"></div>
js
data() { return { isBold: false } }
最終渲染的樣子:
<div class></div> <!-- ? 啊! 空的class -->
如果isBold
為true
,會被渲染為:
<div class="bold"></div>
null
接著,來看看如果我們給類賦值為null
會發(fā)生什么。
html
<div :class="isBold ? 'bold' : null"></div>
js
data() { return { isBold: false } }
最終渲染的樣子:
<div></div> <!-- ? Nice, 沒有空的 class -->
如果isBold
為true
,會被渲染為:
<div class="bold"></div>
順便說一句,undefined
也可以正常工作 ?
<div :class="isBold ? 'bold' : undefined"></div>
<div></div> <!-- ? Nice, no empty class -->
下面這些是 JS 中的虛值。 因此,如果isBold
是這些值中的任何一個,它將返回三元運(yùn)算符的假的情況。
false undefined null NaN 0 "" or '' or `` (empty string)
對于上面的事例,使用對象語法會更好一些:
<div :class="{ bold: isBold }"></div>
使用三元運(yùn)算符的一個更好的場景是設(shè)置多個類。
<div :class="isActive ? 'underline bold' : null"></div>
&&
設(shè)置類我們看看另一個場景,看看它是否有效。
<div :class="isBold && 'bold'"></div>
&&
不僅是邏輯運(yùn)算符,它實(shí)際上可以產(chǎn)生一個值。 因此,如果isBold
為真值,則返回bold
。 但是,如果isBold
是虛值,則返回isBold
的值。
強(qiáng)調(diào)最后一點(diǎn)-它將返回isBold
的值。 因此,取決于isBold
的值是什么,我們原來具有空類的問題仍然存在。 讓我們看一些例子。
isBold
等于false
<div :class="isBold && 'bold'"></div>
這仍然會渲染空類 ?
<div class></div>
isBold
等于null
<div :class="isBold && 'bold'"></div>
由于isBold
為null
,因此空類消失了 ?。
<div></div>
&&
沒錯-實(shí)際上,它只是完成其工作。 只是我們需要一個特定的返回值。 在其他方面,我們不能渲染空類,我們必須傳遞null
或undefined
。 除了這兩個的任何其他虛值都是不行的。 因?yàn)檫@很容易被遺漏,所以我更喜歡更明確的三元運(yùn)算符,或者只是對象語法?。
我嘗試使用W3C Markup Validation Service進(jìn)行檢查,兩種語法確實(shí)都可以通過。
<!-- Pass --> <div class>...</div> <!-- Pass --> <div>...</div>
深入到HTML標(biāo)準(zhǔn): HTML Standard: Empty attribute syntax,它似乎不允許空屬性。
但是這種有效性不適用于id
。因?yàn)榭?code>id被認(rèn)為是無效的。
<!-- Fail --> <div id>...</div> <!-- Fail --> <div id="">...</div> <!-- Pass --> <div id="name">...</div>
? 錯誤:ID不能為空字符串。
“Vue中怎么避免在動態(tài)綁定類時出現(xiàn)空類”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。