关于前端:在-Vue-中如何避免在动态绑定-类-出现空-类-的情况

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验ChatGpt plus版本的，咱们出的钱
体验地址:https://chat.waixingyun.cn
能够退出网站底部技术群，一起找bug.

传递空字符串，这可能会导致 DOM 输入中的类为空。在三元运算符中，咱们能够返回"null"，这能够确保 DOM 中没有空类

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

计划 1：应用空字符串 `''`

咱们应用三元运算符依据isBold是true还是falsy来有条件地设置适当的类。在上面示例中，如果isBold是 真值，类就被设置为bold。如果是虚值的，它将返回一个空字符串''。

html

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

data() {  return {    isBold: false  }}

最终渲染的样子：

<div class></div><!--  啊！ 空的class -->

如果isBold为true，会被渲染为：

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

计划 2：应用`null`

接着，来看看如果咱们给类赋值为null会产生什么。

html

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

data() {  return {    isBold: false  }}

最终渲染的样子：

<div></div><!-- ✅ Nice, 没有空的 class -->

如果isBold为true，会被渲染为：

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

计划 3：应用 undefined

顺便说一句，undefined也能够失常工作

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

<div></div><!-- ✅ Nice, no empty class -->

虚值

上面这些是 JS 中的虚值。因而，如果isBold是这些值中的任何一个，它将返回三元运算符的假的状况。

falseundefinednullNaN0"" or '' or `` (empty string)

应用对象语法重构

对于下面的事例，应用对象语法会更好一些：

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

应用三元运算符的一个更好的场景是设置多个类。

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

应用 `&&` 设置类

咱们看看另一个场景，看看它是否无效。

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

&&不仅是逻辑运算符，它实际上能够产生一个值。因而，如果isBold为真值，则返回bold。然而，如果isBold是虚值，则返回isBold的值。

强调最初一点-它将返回isBold的值。因而，取决于isBold的值是什么，咱们原来具备空类的问题依然存在。让咱们看一些例子。

示例 A：`isBold`等于`false`

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

这依然会渲染空类

<div class></div>

示例B：`isBold`等于`null`

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

因为isBold为null，因而空类隐没了。

<div></div>

&&没错-实际上，它只是实现其工作。只是咱们须要一个特定的返回值。在其余方面，咱们不能渲染空类，咱们必须传递null或undefined。除了这两个的任何其余虚值都是不行的。因为这很容易被脱漏，所以我更喜爱更明确的三元运算符，或者只是对象语法。

空类属性是否谬误？

我尝试应用W3C Markup Validation Service进行查看，两种语法的确都能够通过。

<!-- Pass --><div class>...</div><!-- Pass --><div>...</div>

深刻到HTML规范: HTML Standard: Empty attribute syntax，它仿佛不容许空属性。

然而...

然而这种有效性不适用于id。因为空id被认为是有效的。

<!-- Fail --><div id>...</div><!-- Fail --><div id="">...</div><!-- Pass --><div id="name">...</div>

❌ 谬误：ID不能为空字符串。

总结

因为空类被认为是无效的，并且标准不拥护它，因而所有这些都由你本人抉择。它是你的代码库，你能够决定如何解决它。如果你想放弃HTML输入的整洁，则能够将null传递给 Vue 三元运算符。如果这对你来说无关紧要，那就算了。这里没有正确的答案，这齐全取决于你的偏好

人才们的 【三连】 就是小智一直分享的最大能源，如果本篇博客有任何谬误和倡议，欢送人才们留言，最初，谢谢大家的观看。

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

作者：Samantha Ming 译者：前端小智起源：medium

原文：https://www.samanthaming.com/tidbits/96-vue-use-null-for-class/

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

计划 1：应用空字符串 ''

计划 2：应用null