< 返回技术文档列表

怎么避免在Vue中使用null作为class的空值

发布时间:2021-11-07 02:39:51

本篇内容主要讲解“怎么避免在Vue中使用null作为class的空值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么避免在Vue中使用null作为class的空值”吧!

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

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

比较空字符串 '' 和 null

让我们深入研究上面的示例,然后更全面地了解正在发生的事情。

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

我们使用三元运算符根据 isBold 是true还是falsy来有条件地设置适当的类。在此示例中,我们要说的是,如果 isBold 是 true  的,它将把该类设置为 bold。如果是 false 的,它将返回一个空字符串 “”。 :class 是 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 的值。

强调最后一点&mdash;&mdash;它将返回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>

&& 并没有错&mdash;&mdash;事实上它正在做它的工作,只是我们需要一个具体的返回值。在其他方面,我们不能渲染空类,我们必须传递 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不能为空字符串。

到此,相信大家对“怎么避免在Vue中使用null作为class的空值”有了更深的了解,不妨来实际操作一番吧!这里是血鸟云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


/template/Home/Zkeys/PC/Static