短信预约-IT技能 免费直播动态提醒
在 Vue 中如何避免在动态绑定类出现空类的情况?
传递空字符串，这可能会导致 DOM 输出中的类为空。在三元运算符中，我们可以返回"null"，这可以确保 DOM 中没有空类🌟
-
- "isBold ? 'bold' : ''">
- -- -->
-
- -- ✅ -->
- "isBold ? 'bold' : null">
- --
-->
方案 1：使用空字符串 ''
我们使用三元运算符根据isBold是true还是falsy来有条件地设置适当的类。在下面示例中，如果isBold是 真值，类就被设置为bold。如果是虚值的，它将返回一个空字符串''。
html
- "isBold ? 'bold' : ''">
js
- data() {
- return {
- isBold: false
- }
- }
最终渲染的样子：
- -- 😱 啊！ 空的class -->
如果isBold为true，会被渲染为：
- "bold">
方案 2：使用null
接着，来看看如果我们给类赋值为null会发生什么。
html
- "isBold ? 'bold' : null">
js
- data() {
- return {
- isBold: false
- }
- }
最终渲染的样子：
-
- -- ✅ Nice, 没有空的 class -->
如果isBold为true，会被渲染为：
- "bold">
&&没错-实际上，它只是完成其工作。只是我们需要一个特定的返回值。在其他方面，我们不能渲染空类，我们必须传递null或undefined。除了这两个的任何其他虚值都是不行的。因为这很容易被遗漏，所以我更喜欢更明确的三元运算符，或者只是对象语法👍。
但是...
由于空类被认为是有效的，并且规范不反对它，因此所有这些都由你自己选择。它是你的代码库，你可以决定如何处理它。如果你想保持HTML输出的整洁，则可以将null传递给 Vue 三元运算符。如果这对你来说无关紧要，那就算了。这里没有正确的答案，这完全取决于你的偏好。
作者：Samantha Ming 译者：前端小智 来源：medium 原文：https://www.samanthaming.com/tidbits/96-vue-use-null-for-class/
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
