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

·  阅读 403
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
  }
}
复制代码

渲染结果

<!-- 这里就没有空的class -->
<div></div>
复制代码

假如 isBold 为 true,渲染结果

<div class="bold"></div>
复制代码

场景3:使用undefined

<div :class="isBold ? 'bold' : undefined"></div>
<div></div>
<!-- 这里就没有空的class -->
复制代码

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>
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改