在我們用三元表達(dá)式給DOM元素設(shè)置class時(shí)，使用空字符串，會(huì)導(dǎo)致渲染出一個(gè)沒(méi)有值的空class, 為了避免這種情況出現(xiàn)，可以使用null來(lái)代替空字符串。

<!-- ❌ -->
<div :class="isBold ? 'bold' : ''">
<!-- <div class> -->

<!-- ✅ -->
<div :class="isBold ? 'bold' : null">
<!-- <div> -->

比較空字符串''和null

繼續(xù)來(lái)分析上面2行代碼

情況1：使用空字符串''

我們使用三元操作符，來(lái)決定是否給元素綁定class, isBold為true時(shí)綁定，返回bold，否則，返回''

<div :class="isBold ? 'bold' : ''"></div>

data() {
  return {
    isBold: false
  }
}

這時(shí)，渲染結(jié)果如下

<div class></div>
<!-- 😱 空的class -->

如果isBold為true，渲染結(jié)果如下

<div class="bold"></div>

情況2：使用null

看看使用null的渲染結(jié)果

<div :class="isBold ? 'bold' : null"></div>

data() {
  return {
    isBold: false
  }
}

渲染結(jié)果如下

<div></div>
<!-- ✅ 很好 無(wú)空class>

如果isBold為false，渲染結(jié)果如下

<div class="bold"></div>

情況3：使用undefined

undefined和null的效果一樣

<div :class="isBold ? 'bold' : undefined"></div>

<div></div>
<!-- ✅ 很好 無(wú)空class>

關(guān)于False值

當(dāng)isBold的值為以下值時(shí)，三元表達(dá)式返回的也是假值

false
undefined
null
NaN
0
"" or '' or `` (empty string)

使用對(duì)象的形式綁定class

使用對(duì)象的形式更加可讀

<div :class="{ bold: isBold }"></div>

但三元表達(dá)式最佳的用處是在綁定復(fù)雜的class時(shí)

<div :class="isActive ? 'underline bold' : null"></div>

使用 &&綁定class

來(lái)看看另外一種情況

<div :class="isBold && 'bold'"></div>

&& 不僅是一個(gè)邏輯操作符，它同樣可以返回值，正如上面的代碼，如果isBold為真，它會(huì)返回bold,但是isBold為假的時(shí)候呢？

案例1：isBold為false

<div :class="isBold && 'bold'"></div>

這個(gè)時(shí)候回返回空class

<div class></div>

案例2：isBold為null

<div :class="isBold && 'bold'"></div>

為null時(shí)不會(huì)有空class

<div></div>

案例3：isBold為undefined

<div :class="isBold && 'bold'"></div>

為undefined時(shí)也不會(huì)有空class

<div></div>

造成上面這種情況的出現(xiàn)不是&&的問(wèn)題，它只是用來(lái)做判斷并返回值而已

所以，如果我們想要使用&&時(shí)避免返回空class,最好用null或者undefined

但我更推薦大家使用對(duì)象的或者數(shù)組綁定的語(yǔ)法去設(shè)置class

空class就一定不對(duì)嗎？

在W#C的標(biāo)準(zhǔn)中， 空class也是可以用的

<!-- 無(wú)錯(cuò)誤 -->
<div class>...</div>

<!-- 無(wú)錯(cuò)誤 -->
<div>...</div>

HTML的語(yǔ)法用也沒(méi)要求不準(zhǔn)使用空的屬性

但是，為了代碼的可讀性，建議大家不要使用空屬性，特別是在需要操作DOM屬性做判斷時(shí)

空的屬性很容易造成難以察覺(jué)的錯(cuò)誤

e.target.classList

e.className

img.src

...

但是...
空的id屬性是不被允許的

<!-- 錯(cuò)誤 -->
<div id>...</div>

<!-- 錯(cuò)誤 -->
<div id="">...</div>

<!-- 正確 -->
<div id="name">...</div>

❌ Error: An ID must not be the empty string.

到此這篇關(guān)于為什么vue中不建議使用空字符串作為className的文章就介紹到這了,更多相關(guān)vue 空字符串作為className內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論