Vue 中如何避免在動態綁定 類別 出現空 類別 的情況?以下這篇文章跟大家介紹Vue中避免在動態綁定類別時出現空類別情況的方法,希望對大家有幫助!
【相關推薦:vuejs影片教學】
傳遞空字串,這可能會導致DOM 輸出中的類別為空。在三元運算子中,我們可以返回"null",這可以確保DOM 中沒有空類別?
<!-- ❌ --> <div :class="isBold ? 'bold' : ''"> <!-- <div class> --> <!-- ✅ --> <div :class="isBold ? 'bold' : null"> <!-- <div> --
''
我們使用三元運算子根據isBold
是true
還是falsy
來有條件地設定適當的類別。在下面範例中,如果isBold
是 真值
,類別就被設定為bold
。如果是虛值
的,它將傳回一個空字串''
。
html
<div :class="isBold ? 'bold' : ''"></div>
js
#data() { return { isBold: false } }
最終渲染的樣子:
<div class></div> <!-- ? 啊! 空的class -->
如果 isBold
為true
,會被渲染為:
<div class="bold"></div>
null
接著,來看看如果我們給類別賦值為null
會發生什麼事。
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
是這些值中的任何一個,它將傳回三元運算子的假的情況。
false undefined null NaN 0 "" or '' or `` (empty string)
對於上面的事例,使用物件語法會更好:
<div :class="{ bold: isBold }"></div>
使用三元運算子的一個更好的場景是設定多個類別。
<div :class="isActive ? 'underline bold' : null"></div>
&&
設定類別我們看看另一個場景,看看它是否有效。
<div :class="isBold && 'bold'"></div>
&&
不僅是邏輯運算符,它實際上可以產生一個值。因此,如果isBold
為真值,則傳回bold
。但是,如果isBold
是虛值,則傳回isBold
的值。
強調最後一點-它將傳回isBold
的值。因此,取決於isBold
的值是什麼,我們原來有空類別的問題仍然存在。讓我們來看一些例子。
isBold
等於false
<div :class="isBold && 'bold'"></div>
這仍然會渲染空類別?
<div class></div>
isBold
等於null
<div :class="isBold && 'bold'"></div>
由於isBold
為null
,因此空類別消失了?。
<div></div>
&&
沒錯-實際上,它只是完成其工作。只是我們需要一個特定的回傳值。在其他方面,我們不能渲染空類,我們必須傳遞null
或undefined
。除了這兩個的任何其他虛值都是不行的。因為這很容易被遺漏,所以我更喜歡更明確的三元運算符,或者只是物件語法?。
我嘗試使用W3C Markup Validation Service進行檢查,兩種語法確實都可以通過。
<!-- Pass --> <div class>...</div> <!-- Pass --> <div>...</div>
深入到HTML標準: HTML Standard: Empty attribute syntax,它似乎不允許空屬性。
但是這種有效性不適用於id
。因為空id
被認為是無效的。
<!-- Fail --> <div id>...</div> <!-- Fail --> <div id="">...</div> <!-- Pass --> <div id="name">...</div>
❌ 錯誤:ID不能為空字串。
由於空類別被認為是有效的,並且規範不反對它,因此所有這些都由你自己選擇。它是你的程式碼庫,你可以決定如何處理它。如果你想保持HTML輸出的整潔,則可以將null
傳遞給 Vue 三元運算子。如果這對你來說無關緊要,那就算了。這裡沒有正確的答案,這完全取決於你的偏好?
以上是聊聊怎麼Vue中避免在動態綁定類別時出現空類別的情況!的詳細內容。更多資訊請關注PHP中文網其他相關文章!