后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何避免 Vue 中出现 null 的空类
不要传递空字符串，因为这会导致 DOM 输出中出现空类。在三元运算符中，你可以返回“null”。这样可以确保 DOM 中没有空类。
<!-- ❌ -->
<div :class="isBold ? 'bold' : ''">
<!-- <div class> -->
<!-- ✅ -->
<div :class="isBold ? 'bold' : null">
<!-- <div> -->
比较空字符串''与null
让我们深入研究上面的例子，更全面地了解正在发生的事情。
场景 1：使用空字符串''
我们使用三元运算符，根据 是否isBold为真来设置相应的类。在这个例子中，我们说，如果isBold为真，就将类设置为bold。如果 为假，就返回一个空字符串''。这种语法:class是 的缩写v-bind:class。
<div :class="isBold ? 'bold' : ''"></div>
data() {
return {
isBold: false
}
}
这将呈现：
<div class></div>
<!-- 😱 Yikes, empty class -->
如果isBold是true，它将呈现：
<div class="bold"></div>
场景 2：使用null
好吧，让我们看看如果我们将其分配null给我们的类的值会发生什么。
<div :class="isBold ? 'bold' : null"></div>
data() {
return {
isBold: false
}
}
这将呈现：
<div></div>
<!-- ✅ Nice, no empty class -->
如果isBold是true，它将呈现：
<div class="bold"></div>
场景 3：使用undefined
顺便说一句，undefined也可以
<div :class="isBold ? 'bold' : undefined"></div>
<div></div>
<!-- ✅ Nice, no empty class -->
虚假值
简单提醒一下，这些是 JavaScript 中的假值。因此，如果isBold是其中任何一个值，它将返回三元运算符的假值条件。
false
undefined
null
NaN
0
"" or '' or `` (empty string)
要了解有关该主题的更多信息，您可以查看我之前的文章《JS 基本知识：虚假值》。
使用对象语法重构
对于我的简单示例，使用如下对象语法可能会更好：
<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 标记验证服务检查这一点，两种语法确实都通过了。
<!-- Pass -->
<div class>...</div>
<!-- Pass -->
<div>...</div>
深入研究HTML 标准：空属性语法，似乎并不禁止空属性。
但...
但有效性并不适用于id。因为空 ID 被视为无效。
<!-- Fail -->
<div id>...</div>
<!-- Fail -->
<div id="">...</div>
<!-- Pass -->
<div id="name">...</div>
❌ 错误：ID 不能为空字符串。
结论
由于空类被认为是有效的，并且规范也不反对，所以这一切都取决于你的风格选择。这是你的代码库，你可以决定如何处理它。如果你想保持 HTML 输出的简洁，那么你可以传递null给 Vue 三元运算符。如果你不介意，那就别管了。这里没有错误的答案，完全取决于你的喜好👍
社区意见
@kiwi_kaiser : _（空类有什么问题？__代码中的噪音。使其变得更大，用户必须下载更多内容，搜索引擎必须更加努力地从网站中获取重要信息。
@felipperegazio：简单说一下需要考虑的一点：CSS:not([class])选择器不会应用于带有 的元素class=""。我的意思是：带有 的元素class=""不会被 选中:not([class])——这是正确的，因为属性 class 就在那里。
这可能会导致误解，这就是为什么我认为这种选择器是一种不好的做法。总之，有些开发者会用这种选择器来验证元素是否包含类，这在使用 Vue 时尤其危险，所以你的帖子主题也有助于防止这种情况下的 bug。
资源
- Vue：类和样式绑定
- Stack Overflow：空的类属性是有效的 HTML 吗？
- HTML 标准：空属性语法
- Stack Overflow：HTML4 中允许没有值的属性吗？
- Stack Overflow：哪些 html5 属性允许使用“空属性语法”？
感谢阅读❤
欲了解更多代码花絮，请访问samanthaming.com