怎么避免在Vue中使用null作為class的空值

本篇內容主要講解“怎么避免在Vue中使用null作為class的空值”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么避免在Vue中使用null作為class的空值”吧!

使用 null 而不是傳遞一個空字符串，這可能會導致DOM輸出中的一個空類。在你的三元操作符中，你可以返回 null。這將確保DOM中沒有空類：

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

比較空字符串 '' 和 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不能為空字符串。

到此，相信大家對“怎么避免在Vue中使用null作為class的空值”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！