乐趣区

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

作者: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:应用空字符串 ''

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

html

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

js

data() {
  return {isBold: false}
}

最终渲染的样子:

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

如果 isBoldtrue,会被渲染为:

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

计划 2:应用null

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

html

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

js

data() {
  return {isBold: false}
}

最终渲染的样子:

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

如果 isBoldtrue,会被渲染为:

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

因为 isBoldnull,因而空类隐没了 👍。

<div></div>

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

空类属性是否谬误?

我尝试应用 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。

退出移动版