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

本文介绍了在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>

如有疑问,可以关注下面公众号咨询!
更有各种前端新技术博文更新,想学习的小同学赶紧关注吧!😌 😌 😌
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值