Vue中className绑定空字符串的风险与最佳实践

在使用三元表达式为DOM元素动态设置class时，若条件不满足返回空字符串，Vue会渲染出一个值为空的class属性。为避免生成这种无实际意义的空class，建议改用null作为默认返回值。

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

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

比较空字符串''和null

接下来深入分析上述两种写法的具体差异。

情况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

对象形式的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并希望避免返回空class，最好确保条件变量为null或undefined。

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

空class就一定不对吗？

在W3C的标准中， 空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内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！