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中文網其他相關文章！
