您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Vue動(dòng)態(tài)綁定類時(shí)要如何避免出現(xiàn)空類情況”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue動(dòng)態(tài)綁定類時(shí)要如何避免出現(xiàn)空類情況”這篇文章吧。
傳遞空字符串,這可能會(huì)導(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
。 如果是虛值
的,它將返回一個(gè)空字符串''
。
html
<div :class="isBold ? 'bold' : ''"></div>
js
data() { return { isBold: false } }
最終渲染的樣子:
<div class></div> <!-- ??! 空的class -->
如果isBold
為true
,會(huì)被渲染為:
<div class="bold"></div>
null
接著,來看看如果我們給類賦值為null
會(huì)發(fā)生什么。
html
<div :class="isBold ? 'bold' : null"></div>
js
data() { return { isBold: false } }
最終渲染的樣子:
<div></div> <!-- Nice, 沒有空的 class -->
如果isBold
為true
,會(huì)被渲染為:
<div class="bold"></div>
順便說一句,undefined
也可以正常工作
<div :class="isBold ? 'bold' : undefined"></div>
<div></div> <!-- Nice, no empty class -->
下面這些是 JS 中的虛值。 因此,如果isBold
是這些值中的任何一個(gè),它將返回三元運(yùn)算符的假的情況。
false undefined null NaN 0 "" or '' or `` (empty string)
對于上面的事例,使用對象語法會(huì)更好一些:
<div :class="{ bold: isBold }"></div>
使用三元運(yùn)算符的一個(gè)更好的場景是設(shè)置多個(gè)類。
<div :class="isActive ? 'underline bold' : null"></div>
&&
設(shè)置類我們看看另一個(gè)場景,看看它是否有效。
<div :class="isBold && 'bold'"></div>
&&
不僅是邏輯運(yùn)算符,它實(shí)際上可以產(chǎn)生一個(gè)值。 因此,如果isBold
為真值,則返回bold
。 但是,如果isBold
是虛值,則返回isBold
的值。
強(qiáng)調(diào)最后一點(diǎn)-它將返回isBold
的值。 因此,取決于isBold
的值是什么,我們原來具有空類的問題仍然存在。 讓我們看一些例子。
isBold
等于false
<div :class="isBold && 'bold'"></div>
這仍然會(huì)渲染空類
<div class></div>
isBold
等于null
<div :class="isBold && 'bold'"></div>
由于isBold
為null
,因此空類消失了。
<div></div>
&&
沒錯(cuò)-實(shí)際上,它只是完成其工作。 只是我們需要一個(gè)特定的返回值。 在其他方面,我們不能渲染空類,我們必須傳遞null
或undefined
。 除了這兩個(gè)的任何其他虛值都是不行的。 因?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>
? 錯(cuò)誤:ID不能為空字符串。
以上是“Vue動(dòng)態(tài)綁定類時(shí)要如何避免出現(xiàn)空類情況”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(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)容。