为什么vue中不建议使用空字符串作为className

在我们用三元表达式给DOM元素设置class时，使用空字符串，会导致渲染出一个没有值的空class, 为了避免这种情况出现，可以使用null来代替空字符串。

<!-- ❌ -->
<div :class="isBold ? 'bold' : ''">
<!-- <div class> -->

<!-- ✅ -->
<div :class="isBold ? 'bold' : null">
<!-- <div> -->

比较空字符串''和null

继续来分析上面2行代码

情况1：使用空字符串''

我们使用三元操作符，来决定是否给元素绑定class, isBold为true时绑定，返回bold，否则，返回''

<div :class="isBold ? 'bold' : ''"></div>

data() {
  return {
    isBold: false
  }
}

这时，渲染结果如下

<div class></div>
<!-- 😱 空的class -->

如果isBold为true，渲染结果如下

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

情况2：使用null

看看使用null的渲染结果

<div :class="isBold ? 'bold' : null"></div>

data() {
  return {
    isBold: false
  }
}

渲染结果如下

<div></div>
<!-- ✅ 很好 无空class>

如果isBold为false，渲染结果如下

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

情况3：使用undefined

undefined和null的效果一样

<div :class="isBold ? 'bold' : undefined"></div>

<div></div>
<!-- ✅ 很好 无空class>

关于False值

当isBold的值为以下值时，三元表达式返回的也是假值

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

使用对象的形式绑定class

使用对象的形式更加可读

<div :class="{ bold: isBold }"></div>

但三元表达式最佳的用处是在绑定复杂的class时

<div :class="isActive ? 'underline bold' : null"></div>

使用 &&绑定class

来看看另外一种情况

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

&& 不仅是一个逻辑操作符，它同样可以返回值，正如上面的代码，如果isBold为真，它会返回bold,但是isBold为假的时候呢？

案例1：isBold为false

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

这个时候回返回空class

<div class></div>

案例2：isBold为null

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

为null时不会有空class

<div></div>

案例3：isBold为undefined

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

为undefined时也不会有空class

<div></div>

造成上面这种情况的出现不是&&的问题，它只是用来做判断并返回值而已

所以，如果我们想要使用&&时避免返回空class,最好用null或者undefined

但我更推荐大家使用对象的或者数组绑定的语法去设置class

空class就一定不对吗？

在W#C的标准中， 空class也是可以用的

<!-- 无错误 -->
<div class>...</div>

<!-- 无错误 -->
<div>...</div>

HTML的语法用也没要求不准使用空的属性

但是，为了代码的可读性，建议大家不要使用空属性，特别是在需要操作DOM属性做判断时

空的属性很容易造成难以察觉的错误

e.target.classList

e.className

img.src

...

但是...
空的id属性是不被允许的

<!-- 错误 -->
<div id>...</div>

<!-- 错误 -->
<div id="">...</div>

<!-- 正确 -->
<div id="name">...</div>

❌ Error: An ID must not be the empty string.

到此这篇关于为什么vue中不建议使用空字符串作为className的文章就介绍到这了,更多相关vue 空字符串作为className内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论