乐趣区

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

jiezi

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

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

传递空字符串，这可能会导致 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。

原文：https://www.samanthaming.com/…

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。

退出移动版