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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
在Vue中如何避免在動態(tài)綁定類出現(xiàn)空類的情況?

傳遞空字符串，這可能會導致 DOM 輸出中的類為空。在三元運算符中，我們可以返回"null"，這可以確保 DOM 中沒有空類

創(chuàng)新互聯(lián)公司IDC提供業(yè)務(wù):川西大數(shù)據(jù)中心,成都服務(wù)器租用,川西大數(shù)據(jù)中心,重慶服務(wù)器租用等四川省內(nèi)主機托管與主機租用業(yè)務(wù);數(shù)據(jù)中心含:雙線機房,BGP機房,電信機房,移動機房,聯(lián)通機房。

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

方案 1：使用空字符串 ''

我們使用三元運算符根據(jù)isBold是true還是falsy來有條件地設(shè)置適當?shù)念悺Ｔ谙旅媸纠?，如果isBold是 真值，類就被設(shè)置為bold。如果是虛值的，它將返回一個空字符串''。

html
 

js

   
 
 
 
    
    
  
  
  
  1. data() { 
    2. 
    
  
  
  
  2.   return { 
    3. 
    
  
  
  
  3.     isBold: false 
    4. 
    
  
  
  
  4.   } 
    5. 
    
  
  
  
  5. } 
    6.

最終渲染的樣子：
 
  •  

    •  

     

    如果isBold為true，會被渲染為：
     

     

     

    方案 2：使用null

    接著，來看看如果我們給類賦值為null會發(fā)生什么。

    html
     

     

     

    js

       
 
 
 
      
    
  
  
  
    1. data() { 
      2. 
    
  
  
  
    2.   return { 
      3. 
    
  
  
  
    3.     isBold: false 
      4. 
    
  
  
  
    4.   } 
      5. 
    
  
  
  
    5. } 
      6.

    最終渲染的樣子：

       
 
 
 
      
    
  
  
  
    1.  
      2. 
    
  
  
  
    2.  
      3.

     

     

    如果isBold為true，會被渲染為：
     

     

     

    方案 3：使用 undefined

    順便說一句，undefined也可以正常工作
      
       
 
 
 
      
    
  
  
  
    1.  
      2. 
    
  
  
  
    2.  
      3.

    虛值

    下面這些是 JS 中的虛值。因此，如果isBold是這些值中的任何一個，它將返回三元運算符的假的情況。

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

    使用對象語法重構(gòu)

    對于上面的事例，使用對象語法會更好一些：
     

     

     

    使用三元運算符的一個更好的場景是設(shè)置多個類。
     

     

     

    使用 && 設(shè)置類

    我們看看另一個場景，看看它是否有效。
     

     

     

    &&不僅是邏輯運算符，它實際上可以產(chǎn)生一個值。因此，如果isBold為真值，則返回bold。但是，如果isBold是虛值，則返回isBold的值。

    強調(diào)最后一點-它將返回isBold的值。因此，取決于isBold的值是什么，我們原來具有空類的問題仍然存在。讓我們看一些例子。

    示例 A：isBold等于false
     

     

    這仍然會渲染空類
     

     

     

    示例B：isBold等于null

     

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

       
 
 
 
      
    
  
  
  
    1.  
      2.

     

     

    &&沒錯-實際上，它只是完成其工作。只是我們需要一個特定的返回值。在其他方面，我們不能渲染空類，我們必須傳遞null或undefined。除了這兩個的任何其他虛值都是不行的。因為這很容易被遺漏，所以我更喜歡更明確的三元運算符，或者只是對象語法。

    空類屬性是否錯誤?

    我嘗試使用W3C Markup Validation Service進行檢查，兩種語法確實都可以通過。

       
 
 
 
      
    
  
  
  
    1.  
      2. 
    
  
  
  
    2. ...
     
  •  
  •  
  • ...
     

    •  

    深入到HTML標準: HTML Standard: Empty attribute syntax，它似乎不允許空屬性。

    但是...

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

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

     

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

    總結(jié)

    由于空類被認為是有效的，并且規(guī)范不反對它，因此所有這些都由你自己選擇。它是你的代碼庫，你可以決定如何處理它。如果你想保持HTML輸出的整潔，則可以將null傳遞給 Vue 三元運算符。如果這對你來說無關(guān)緊要，那就算了。這里沒有正確的答案，這完全取決于你的偏好。

    作者：Samantha Ming 譯者：前端小智 來源：medium 原文：https://www.samanthaming.com/tidbits/96-vue-use-null-for-class/

    本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。


    網(wǎng)頁題目：在Vue中如何避免在動態(tài)綁定類出現(xiàn)空類的情況?
    文章轉(zhuǎn)載：http://www.dlmjj.cn/article/dhsieci.html

    其他資訊