為什麼vue中不建議使用空字符串作為className
在我們用三元表達式給DOM元素設置class時,使用空字符串,會導致渲染出一個沒有值的空class, 為瞭避免這種情況出現,可以使用null來代替空字符串。
<!-- ❌ --> <div :class="isBold ? 'bold' : ''"> <!-- <div class> --> <!-- ✅ --> <div :class="isBold ? 'bold' : null"> <!-- <div> -->
比較空字符串”和null
繼續來分析上面2行代碼
情況1:使用空字符串”
我們使用三元操作符,來決定是否給元素綁定class, isBold為true時綁定,返回bold,否則,返回”
<div :class="isBold ? 'bold' : ''"></div>
data() { return { isBold: false } }
這時,渲染結果如下
<div class></div> <!-- 😱 空的class -->
如果isBold為true,渲染結果如下
<div class="bold"></div>
情況2:使用null
看看使用null的渲染結果
<div :class="isBold ? 'bold' : null"></div>
data() { return { isBold: false } }
渲染結果如下
<div></div> <!-- ✅ 很好 無空class>
如果isBold為false,渲染結果如下
<div class="bold"></div>
情況3:使用undefined
undefined和null的效果一樣
<div :class="isBold ? 'bold' : undefined"></div>
<div></div> <!-- ✅ 很好 無空class>
關於False值
當isBold的值為以下值時,三元表達式返回的也是假值
false
undefined
null
NaN
0
“” or ” or “ (empty string)
使用對象的形式綁定class
使用對象的形式更加可讀
<div :class="{ bold: isBold }"></div>
但三元表達式最佳的用處是在綁定復雜的class時
<div :class="isActive ? 'underline bold' : null"></div>
使用 &&綁定class
來看看另外一種情況
<div :class="isBold && 'bold'"></div>
&& 不僅是一個邏輯操作符,它同樣可以返回值,正如上面的代碼,如果isBold為真,它會返回bold,但是isBold為假的時候呢?
案例1:isBold為false
<div :class="isBold && 'bold'"></div>
這個時候回返回空class
<div class></div>
案例2:isBold為null
<div :class="isBold && 'bold'"></div>
為null時不會有空class
<div></div>
案例3:isBold為undefined
<div :class="isBold && 'bold'"></div>
為undefined時也不會有空class
<div></div>
造成上面這種情況的出現不是&&的問題,它隻是用來做判斷並返回值而已
所以,如果我們想要使用&&時避免返回空class,最好用null或者undefined
但我更推薦大傢使用對象的或者數組綁定的語法去設置class
空class就一定不對嗎?
在W#C的標準中, 空class也是可以用的
<!-- 無錯誤 --> <div class>...</div> <!-- 無錯誤 --> <div>...</div>
HTML的語法用也沒要求不準使用空的屬性
但是,為瞭代碼的可讀性,建議大傢不要使用空屬性,特別是在需要操作DOM屬性做判斷時
空的屬性很容易造成難以察覺的錯誤
e.target.classList
e.className
img.src
…
但是…
空的id屬性是不被允許的
<!-- 錯誤 --> <div id>...</div> <!-- 錯誤 --> <div id="">...</div> <!-- 正確 --> <div id="name">...</div>
❌ Error: An ID must not be the empty string.
到此這篇關於為什麼vue中不建議使用空字符串作為className的文章就介紹到這瞭,更多相關vue 空字符串作為className內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 分享11個常用JavaScript小技巧
- Python docx庫刪除復制paragraph及行高設置圖片插入示例
- Vue基礎教程之條件渲染和列表渲染
- JavaScript相等判斷的避坑實戰指南
- python實現控制臺輸出顏色