如何避免在Vue中使用null的空类

Instead of passing an empty string, which can lead to an empty class in the DOM output. In your ternary operator, you can return “null”. This will ensure no empty class in the DOM 🌟

而不是传递一个空字符串，这可能导致DOM输出中的一个空类。 在三元运算符中，您可以返回“ null”。 这将确保DOM中没有空类🌟

<!-- ❌ -->
<div :class="isBold ? 'bold' : ''">
<!-- <div class> --><!-- ✅ -->
<div :class="isBold ? 'bold' : null">
<!-- <div> -->

Table of Content− Comparing Empty String ‘’ vs null−− Scenario 1: Using Empty String ‘’−− Scenario 2: Using null−− Scenario 3: using undefined−− Falsy Values− Refactoring with Object Syntax− Using && to set class−− Example A: isBold equals false−− Example B: isBold equals null− Is Empty Class Attribute Bad?−− BUT…− Conclusion− Community Input

目录 - 比较空字符串''vs空 - 场景1：使用空字符串'' - 场景2：使用空 - 场景3：使用未定义 - 伪造的值 - 使用对象语法重构 - 使用&&设置类 -- 示例A：isBold等于false-- 示例B：isBold等于null − 空类属性是否错误？ - 但是… − 结论 − 社区意见

比较空字符串'' vs null (Comparing Empty String '' vs null)

Let’s dig into the above example, and see a more complete picture of what’s going on.

让我们深入研究上面的示例，并查看正在发生的事情的更完整的图片。

方案1：使用空字符串'' (Scenario 1: Using Empty String '')

We are using a ternary operator to conditional set the appropriate class depending on if isBold is truthy or falsy. In this example, we're saying that if isBold is truthy, it will set the class to be bold. If it's falsy, it will return an empty string ''. This syntax :class is short for v-bind:class.

我们使用三元运算符来条件设置适当的类，具体取决于isBold是true还是falsy。 在此示例中，我们要说的是，如果isBold为true，它将把该类设置为bold 。 如果是虚假的，它将返回一个空字符串'' 。 此语法:class是v-bind:class缩写。

<div :class="isBold ? 'bold' : ''"></div>data() {
  return {
    isBold: false
  }
}

This will render:

这将呈现：

<div class></div>
<!-- 😱 Yikes, empty class -->

And if isBold is true, it will render:

如果isBold为true ，它将呈现：

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

方案2：使用null (Scenario 2: Using null)

Alright, let’s see what happens if we assign null as the value for our class.

好吧，让我们看看如果将null分配为类的值会发生什么。

<div :class="isBold ? 'bold' : null"></div>data() {
  return {
    isBold: false
  }
}

This will render:

这将呈现：

<div></div>
<!-- ✅ Nice, no empty class -->

And if isBold is true, it will render:

如果isBold为true ，它将呈现：

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

方案3：使用undefined (Scenario 3: using undefined)

By the way, undefined would also work 👍

顺便说一句， undefined也可以工作👍

<div :class="isBold ? 'bold' : undefined"></div><div></div>
<!-- ✅ Nice, no empty class -->

虚假价值观 (Falsy Values)

Just a quick reminder that these are the falsy values in JavaScript. So if isBold is any of these values, it will return the falsy condition of the ternary operator.

提醒一下，这些是JavaScript中的虚假值。 因此，如果isBold是这些值中的任何一个，它将返回三元运算符的虚假条件。

false
undefined
null
NaN
0
"" or '' or `` (empty string)

To read more about this topic, you can check out my previous post, JS Essentials: Falsy Values.

要阅读有关此主题的更多信息，可以查看我以前的文章JS Essentials：Falsy Values 。

使用对象语法重构 (Refactoring with Object Syntax)

For my simple example, it’s probably way better to use the Object Syntax like this:

对于我的简单示例，使用像这样的对象语法可能更好：

<div :class="{ bold: isBold }"></div>

I guess a better example of using a ternary operator would be for setting multiple classes.

我猜使用三元运算符的一个更好的例子是设置多个类。

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

Tangent: When I’m creating tidbits, I always try to keep things as simple as I can. And one way to do it is to reduce as much visual noise as possible. So my examples can sometimes be overly simplified in hope of the reader being able to grasp the concept immediately without doing much processing. A big inspiration that I follow is from this book, Don’t Make Me Think. Okay enough tangent, let’s get back to the main course! 😆

切线：当创建花絮时，我总是尽量保持简单。 做到这一点的一种方法是尽可能减少视觉噪声。 因此，有时我的示例可能会过分简化，以希望读者无需进行大量处理即可立即掌握该概念。 我从中汲取的一大灵感来自《 不要让我思考》这本书。 好的切线，让我们回到主过程吧！ 😆

使用&&设置课程 (Using && to set class)

Let’s explore another scenario and see if it works.

让我们探索另一个场景，看看它是否有效。

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

&& is not just a logical operator that results in a boolean value. It can actually produce a value. So it's saying if isBold is truthy then return bold. However, if isBold is falsy, then return the value of isBold.

&&不仅是产生布尔值的逻辑运算符。 它实际上可以产生一个值。 所以说isBold是真实的，然后返回bold 。 但是，如果isBold是虚假的，则返回isBold的值。

Emphasis on the last point — It will return the value of isBold. So our original problem of having an empty class can still exist depending on what the value of isBold is. Let's look at some examples.

强调最后一点- 将返回 isBold 的值 。 因此，取决于isBold的值是什么，我们原来具有空类的问题仍然存在。 让我们看一些例子。

示例A： isBold等于false (Example A: isBold equals false)

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

This will still render the empty class 😱

这仍然会渲染空类

<div class></div>

示例B： isBold等于null (Example B: isBold equals null)

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

Since isBold is null, the empty class is gone 👍

由于isBold为null ，所以空类消失了

<div></div>

There’s nothing wrong with && -- it is in fact doing its job. It's just that we need a specific return value. In other for us NOT to render an empty class, we have to pass null or undefined. Any other falsy value just won't work. Because this can be so easily missed, I much prefer the more explicit ternary operator OR simply the object syntax 👍

&&没错-实际上，它正在完成其工作。 只是我们需要一个特定的返回值。 在其他方面，为了不渲染空类，我们必须传递null或undefined 。 任何其他虚假的价值都行不通。 因为这很容易被遗漏，所以我更喜欢更明确的三元运算符，或者只是对象语法

空类属性不好吗？ (Is Empty Class Attribute Bad?)

I tried checking this with the W3C Markup Validation Service, and both syntaxes do indeed pass.

我尝试使用W3C标记验证服务进行检查，并且两种语法确实都可以通过。

<!-- Pass -->
<div class>...</div><!-- Pass -->
<div>...</div>

And diving into the HTML Standard: Empty attribute syntax, it doesn’t seem like it disallows empty attribute.

并深入探讨HTML标准：空属性语法 ，似乎并不禁止空属性。

但… (BUT…)

But the valid-ness does NOT apply to id. Because empty id is considered invalid.

但是有效性不适用于id 。 因为空ID被认为是无效的。

<!-- Fail -->
<div id>...</div><!-- Fail -->
<div id="">...</div><!-- Pass -->
<div id="name">...</div>

❌ Error: An ID must not be the empty string.

错误：ID不能为空字符串。

结论 (Conclusion)

Since the empty class is considered valid and the specs are not against it, this all comes to your stylistic choice. It’s your codebase and you can decide how you want to handle it. If you want to keep your HTML output clean, then you can pass null to your Vue ternary operator. If it doesn't matter to you, then forget it. There's no incorrect answer here, it all depends on what you prefer 👍

由于空类被认为是有效的，并且规范不反对它，因此所有这些都由您选择。 这是您的代码库，您可以决定要如何处理它。 如果您想保持HTML输出的整洁，则可以将null传递给Vue三元运算符。 如果这对您来说无关紧要，那就算了。 这里没有正确的答案，这完全取决于您的偏好👍

社区意见 (Community Input)

• @kiwi_kaiser: (What’s wrong with Empty classes?) Noise in the code. Makes it bigger, the user has to download more and search machines have to work harder to get the important information out of the website.

  @kiwi_kaiser ： (Empty类出什么问题了？)代码中有噪音。 扩大规模，用户必须下载更多内容，而搜索机必须更加努力地工作才能从网站中获取重要信息。

Thanks for reading ❤To find more code tidbits, please visit samanthaming.com

感谢您阅读 ❤要查找更多代码花絮，请访问samanthaming.com

🎨 Instagram |🌟 Twitter | 👩🏻‍💻 SamanthaMing.com

🎨 的Instagram |🌟 微博 | 👩🏻💻 SamanthaMing.com

翻译自: https://medium.com/js-dojo/how-to-avoid-empty-class-in-vue-with-null-74d5366507b