千年殇,殿上欢

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

在Vue中如何避免在動(dòng)態(tài)綁定類出現(xiàn)空類的情況?

傳遞空字符串，這可能會(huì)導(dǎo)致 DOM 輸出中的類為空。在三元運(yùn)算符中，我們可以返回"null"，這可以確保 DOM 中沒(méi)有空類

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

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

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

html

   
 
 
 
    
  
  
  data() { 
    
  
  
    return { 
    
  
  
      isBold: false 
    
  
  
    } 
    
  
  
  }

最終渲染的樣子：

如果isBold為true，會(huì)被渲染為：

方案 2：使用null

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

html

   
 
 
 
    
  
  
  data() { 
    
  
  
    return { 
    
  
  
      isBold: false 
    
  
  
    } 
    
  
  
  }

最終渲染的樣子：

如果isBold為true，會(huì)被渲染為：

方案 3：使用 undefined

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

虛值

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

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

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

對(duì)于上面的事例，使用對(duì)象語(yǔ)法會(huì)更好一些：

使用三元運(yùn)算符的一個(gè)更好的場(chǎng)景是設(shè)置多個(gè)類。

使用 && 設(shè)置類

我們看看另一個(gè)場(chǎng)景，看看它是否有效。

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

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