Vue中如何使用null去避免空的class

使用Vue时候， 给class动态绑定类名的时候，如果传入了一个 ’ ’ (空的字符串)，可能导致DOM输出一个空的class。通过三元表达式，用null代替 ’ ’ ，将不会生成一个空的class。

<!-- 不建议 -->
<div :class="isBold ? 'bold' : ''"></div>
<!-- <div class> -->

<!-- 推荐写法 -->
<div：class ="isBold？'bold': null"></div> 
<!-- <div > -->

场景1：使用空字符串 ‘’

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

渲染结果

<div class></div>
<!-- 结果是空的 class -->

假如isBold 为 true，渲染结果

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

场景2：使用null

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

渲染结果

<div></div>
<!-- 这里就没有空的class -->
假如 isBold 为 true，渲染结果
<div class="bold"></div>

场景3：使用undefined

False的值
注意，以下都是JavaScript中的false值。因此，如果isBold这些值中的任何一个，它将返回三元运算符的false情况

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

通过&&符设置class

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

<!-- 如果 isBold 为true 结果为 -->
<div class="bold">Hello world</div

<!-- 如果 isBold 为 false 结果为 -->
<div class >Hello world</div>

<!-- 如果 isBold 为null 结果为 -->
<div>Hello world</div>

如有疑问，可以关注下面公众号咨询！
更有各种前端新技术博文更新，想学习的小同学赶紧关注吧！😌 😌 😌