共计 2419 个字符，预计需要花费 7 分钟才能阅读完成。
本文首发于微信公众号：大迁世界, 我的微信：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>js
data() {
return {isBold: false}
}最终渲染的样子：
<div class></div>
<!-- 😱 啊！空的 class -->如果 isBold 为true，会被渲染为：
<div class="bold"></div>计划 2：应用null
接着，来看看如果咱们给类赋值为 null 会产生什么。
html
<div :class="isBold ?'bold': null"></div>js
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 是这些值中的任何一个，它将返回三元运算符的假的状况。
false
undefined
null
NaN
0
""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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
