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

最新推荐文章于 2025-04-26 17:18:08 发布

原创最新推荐文章于 2025-04-26 17:18:08 发布 · 382 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了在Vue中避免生成空class的两种方法：使用null替代空字符串和使用逻辑与运算符(&&)。详细比较了不同情况下，isBold变量为false、true、null时的渲染结果，并解释了为何使用null可以防止生成空class。此外，还探讨了JavaScript中的false值在三元表达式中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

使用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>