日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
如何避免在Vue中使用null作為class的空值

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

創(chuàng)新互聯(lián)建站專注于潮南企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),成都商城網(wǎng)站開(kāi)發(fā)。潮南網(wǎng)站建設(shè)公司,為潮南等地區(qū)提供建站服務(wù)。全流程按需規(guī)劃網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.    
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.

比較空字符串 '' 和 null

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

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

我們使用三元運(yùn)算符根據(jù) isBold 是true還是falsy來(lái)有條件地設(shè)置適當(dāng)?shù)念?。在此示例中，我們要說(shuō)的是，如果 isBold 是 true 的，它將把該類設(shè)置為 bold。如果是 false 的，它將返回一個(gè)空字符串 “”。 :class 是 v-bind:class 的縮寫(xiě)。
 
  •  
  • data() { 
  •   return { 
  •     isBold: false 
  •   } 
  • } 

    • 這將渲染：
     
  •  

    • 如果 isBold 為 true ，它將渲染：
     

    (2) 方案2：使用 null /

    好吧，讓我們看看如果將 null 分配為類的值會(huì)發(fā)生什么。
     
  •  
  • data() { 
  •   return { 
  •     isBold: false 
  •   } 
  • } 

    • 這將渲染：

       
 
 
 
          
  
  
  
    1.  
      2.     
  
  
  
    2.  
      3.

    如果 isBold 為 true ，它將渲染：
     

    (3) 方案3：使用undefined /

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

    • false值

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

       
 
 
 
          
  
  
  
    1. false 
      2.     
  
  
  
    2. undefined 
      3.     
  
  
  
    3. null 
      4.     
  
  
  
    4. NaN 
      5.     
  
  
  
    5. 0 
      6.     
  
  
  
    6. "" or '' or `` (empty string) 
      7.

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

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

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

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

    使用&&設(shè)置class

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

    && 不僅是產(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 /
     

    這仍將渲染空類
     

    例子2： isBold 等于 null /
     

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

       
 
 
 
          
  
  
  
    1.  
      2.

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

    空類屬性不好嗎?

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

       
 
 
 
          
  
  
  
    1.  
      2.     
  
  
  
    2. ... 
      3.     
  
  
  
    3.  
      4.     
  
  
  
    4.  
      5.     
  
  
  
    5. ...
       
      6.

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

    但是...

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

       
 
 
 
          
  
  
  
    1.  
      2.     
  
  
  
    2. ... 
      3.     
  
  
  
    3.  
      4.     
  
  
  
    4.  
      5.     
  
  
  
    5. ... 
      6.     
  
  
  
    6.  
      7.     
  
  
  
    7.  
      8.     
  
  
  
    8. ... 
      9.

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

    總結(jié)

    既然空類被認(rèn)為是有效的，規(guī)范也不反對(duì)，這一切都取決于你的風(fēng)格選擇。這是你的代碼庫(kù)，你可以決定如何處理它。如果你想保持你的HTML輸出干凈，那么你可以將 null 傳遞給你的Vue三元操作符。如果你覺(jué)得無(wú)所謂，那就算了。這里沒(méi)有錯(cuò)誤的答案，全看你喜歡什么了。


    文章標(biāo)題：如何避免在Vue中使用null作為class的空值
    網(wǎng)頁(yè)地址：http://www.dlmjj.cn/article/copijhh.html

    其他資訊