如何避免在Vue中使用null作为class的空值

使用 null 而不是何避传递一个空字符串，这可能会导致DOM输出中的中使l作值一个空类。在你的何避三元操作符中，你可以返回 null。中使l作值这将确保DOM中没有空类：

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

比较空字符串 和 null

让我们深入研究上面的示例，然后更全面地了解正在发生的中使l作值事情。

(1) 方案1：使用空字符串 /

我们使用三元运算符根据 isBold 是何避true还是falsy来有条件地设置适当的类。在此示例中，中使l作值我们要说的何避是，如果 isBold 是中使l作值 true 的，它将把该类设置为 bold。何避如果是中使l作值 false 的，它将返回一个空字符串 “”。何避 :class 是中使l作值 v-bind:class 的缩写。

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

这将渲染：

<div class></div> <!--  糟糕, 空class --> 

如果 isBold 为 true ，它将渲染：

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

(2) 方案2：使用 null /

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

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

这将渲染：

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

如果 isBold 为 true ，它将渲染：

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

(3) 方案3：使用undefined /

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

<div :class="isBold ? bold : undefined"></div>  <div></div> <!-- ✅ Nice, 没有空class --> 

false值

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

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

使用对象语法重构

在我的简单示例中，使用对象语法可能更好一些，如下所示：

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

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

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

题外话：当我创作Demo时，我总是尽量让事情变得简单。其中一种方法就是尽可能地减少视觉噪音。因此，我的例子有时会过于简化，希望读者能够在不做太多处理的情况下立即掌握概念。《别让我思考》这本书给了我很大的启发。好了，言归正传，服务器租用我们回到主菜上吧!

使用&&设置class

让我们探索另一种情况，看看是否可行。

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

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

强调最后一点——它将返回isBold的值。所以我们原来的空类问题仍然可以存在，取决于 isBold 的值是什么。我们来看看一些例子。

例子1： isBold 等于 false /

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

这仍将渲染空类

<div class></div> 

例子2： 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标准：空属性语法，似乎并不禁止空属性。

但是...

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

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

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

总结

既然空类被认为是有效的，规范也不反对，这一切都取决于你的风格选择。这是你的代码库，你可以决定如何处理它。如果你想保持你的HTML输出干净，那么你可以将 null 传递给你的Vue三元操作符。如果你觉得无所谓，那就算了。这里没有错误的答案，全看你喜欢什么了。

-->

很赞哦!（383）