比較空字符串 '' 和 null

讓我們深入研究上面的示例，然后更全面地了解正在發生的事情。

(1) 方案1：使用空字符串 '' /

我們使用三元運算符根據 isBold 是true還是falsy來有條件地設置適當的類。在此示例中，我們要說的是，如果 isBold 是 true 的，它將把該類設置為 bold。如果是 false 的，它將返回一個空字符串 “”。 :class 是 v-bind:class 的縮寫。

<div :class="isBold ? 'bold' : ''"></div> 
 
data() { 
  return { 
    isBold: false 
  } 
} 

這將渲染：

<div class></div> 
<!--  糟糕, 空class --> 

如果 isBold 為 true ，它將渲染：

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

(2) 方案2：使用 null /

好吧，讓我們看看如果將 null 分配為類的值會發生什么。

<div :class="isBold ? 'bold' : null"></div> 
 
data() { 
  return { 
    isBold: false 
  } 
} 

這將渲染：

<div></div> 
<!-- ✅ Nice, 沒有空class --> 

如果 isBold 為 true ，它將渲染：

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

(3) 方案3：使用undefined /

順便說一句， undefined 也可以工作

<div :class="isBold ? 'bold' : undefined"></div> 
 
<div></div> 
<!-- ✅ Nice, 沒有空class --> 

false值

提醒一下，這些是JavaScript中的false值。因此，如果 isBold 是這些值中的任何一個，它將返回三元運算符的false條件。

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

使用對象語法重構

在我的簡單示例中，使用對象語法可能更好一些，如下所示：

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

我猜使用三元運算符的一個更好的例子是設置多個類。

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

題外話：當我創作Demo時，我總是盡量讓事情變得簡單。其中一種方法就是盡可能地減少視覺噪音。因此，我的例子有時會過于簡化，希望讀者能夠在不做太多處理的情況下立即掌握概念。《別讓我思考》這本書給了我很大的啟發。好了，言歸正傳，我們回到主菜上吧!

使用&&設置class

讓我們探索另一種情況，看看是否可行。

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

&& 不僅是產生布爾值的邏輯運算符，它實際上可以產生一個值。因此，這就是說如果 isBold 為真，則返回 bold。但是，如果isBold 為假，則返回 isBold 的值。

強調最后一點——它將返回isBold的值。所以我們原來的空類問題仍然可以存在，取決于 isBold 的值是什么。我們來看看一些例子。

例子1： isBold 等于 false /

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

這仍將渲染空類

<div class></div> 

例子2： 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標準：空屬性語法，似乎并不禁止空屬性。

但是...

但是有效性不適用于 id，因為空ID被認為是無效的。

<!-- Fail --> 
<div id>...</div> 
 
<!-- Fail --> 
<div id="">...</div> 
 
<!-- Pass --> 
<div id="name">...</div> 

❌ 錯誤：ID不能為空字符串。

總結

既然空類被認為是有效的，規范也不反對，這一切都取決于你的風格選擇。這是你的代碼庫，你可以決定如何處理它。如果你想保持你的HTML輸出干凈，那么你可以將 null 傳遞給你的Vue三元操作符。如果你覺得無所謂，那就算了。這里沒有錯誤的答案，全看你喜歡什么了。