本篇內(nèi)容主要講解“怎么避免在Vue中使用null作為class的空值”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么避免在Vue中使用null作為class的空值”吧!

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比喀喇沁網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式喀喇沁網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋喀喇沁地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

使用 null 而不是傳遞一個(gè)空字符串，這可能會(huì)導(dǎo)致DOM輸出中的一個(gè)空類。在你的三元操作符中，你可以返回 null。這將確保DOM中沒(méi)有空類：

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

比較空字符串 '' 和 null

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

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

我們使用三元運(yùn)算符根據(jù) isBold 是true還是falsy來(lái)有條件地設(shè)置適當(dāng)?shù)念悺Ｔ诖耸纠校覀円f(shuō)的是，如果 isBold 是 true  的，它將把該類設(shè)置為 bold。如果是 false 的，它將返回一個(gè)空字符串 “”。 :class 是 v-bind:class 的縮寫(xiě)。

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

這將渲染：

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

如果 isBold 為 true ，它將渲染：

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

(2) 方案2：使用 null /

好吧，讓我們看看如果將 null 分配為類的值會(huì)發(fā)生什么。

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

這將渲染：

<div></div> <!-- ? Nice, 沒(méi)有空class -->

如果 isBold 為 true ，它將渲染：

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

(3) 方案3：使用undefined /

順便說(shuō)一句， undefined 也可以工作

<div :class="isBold ? 'bold' : undefined"></div>  <div></div> <!-- ? Nice, 沒(méi)有空class -->

false值

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

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

使用對(duì)象語(yǔ)法重構(gòu)

在我的簡(jiǎn)單示例中，使用對(duì)象語(yǔ)法可能更好一些，如下所示：

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

我猜使用三元運(yùn)算符的一個(gè)更好的例子是設(shè)置多個(gè)類。

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

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

使用&&設(shè)置class

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

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

&& 不僅是產(chǎn)生布爾值的邏輯運(yùn)算符，它實(shí)際上可以產(chǎn)生一個(gè)值。因此，這就是說(shuō)如果 isBold 為真，則返回 bold。但是，如果isBold 為假，則返回 isBold 的值。

強(qiáng)調(diào)最后一點(diǎn)——它將返回isBold的值。所以我們?cè)瓉?lái)的空類問(wèn)題仍然可以存在，取決于 isBold 的值是什么。我們來(lái)看看一些例子。

例子1： isBold 等于 false /

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

這仍將渲染空類

<div class></div>

例子2： isBold 等于 null /

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

由于 isBold 為 null，因此空類消失了 。

<div></div>

&& 并沒(méi)有錯(cuò)——事實(shí)上它正在做它的工作，只是我們需要一個(gè)具體的返回值。在其他方面，我們不能渲染空類，我們必須傳遞 null 或  undefined。任何其他的假值都是不行的，因?yàn)檫@一點(diǎn)很容易被忽略，所以我更喜歡更明確的三元操作符或者簡(jiǎn)單的對(duì)象語(yǔ)法 。

空類屬性不好嗎?

我試著用W3C Markup Validation Service檢查了一下，兩種語(yǔ)法確實(shí)都通過(guò)了。

<!-- Pass --> <div class>...</div>  <!-- Pass --> <div>...</div>

深入探討HTML標(biāo)準(zhǔn)：空屬性語(yǔ)法，似乎并不禁止空屬性。

但是...

但是有效性不適用于 id，因?yàn)榭誌D被認(rèn)為是無(wú)效的。

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

? 錯(cuò)誤：ID不能為空字符串。

到此，相信大家對(duì)“怎么避免在Vue中使用null作為class的空值”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前名稱：怎么避免在Vue中使用null作為class的空值
標(biāo)題來(lái)源：http://www.chinadenli.net/article30/gpohpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站收錄、網(wǎng)站策劃、自適應(yīng)網(wǎng)站、標(biāo)簽優(yōu)化、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)