How to avoid empty classes in dynamic binding classes in Vue?

前端小智
中文
Author: Samantha Ming
Translator: Frontend Xiaozhi
Source: medium
There are dreams, dry goods, WeChat search [Da Qian World] Pay attention to this Shuawanzhi who is still doing dishes in the early morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

Pass an empty string, which may result in empty classes in the DOM output. In the ternary operator, we can return "null", which ensures that there are no empty classes in the DOM🌟

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

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

Scenario 1: Use an empty string ''

We use the ternary operator to conditionally set the appropriate class isBold is true or falsy In the following example, if isBold is the true value , the class is set to bold . If it is imaginary value, it will return an empty string '' .

html

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

js

data() {
  return {
    isBold: false
  }
}

The final rendering looks like:

<div class></div>
<!-- 😱 啊! 空的class -->

If isBold is true , it will be rendered as:

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

Option 2: Use null

Next, let's see what happens if we assign the value null to the class.

html

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

js

data() {
  return {
    isBold: false
  }
}

The final rendering looks like:

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

If isBold is true , it will be rendered as:

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

Option 3: Use undefined

By the way, undefined can also work 👍

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

Imaginary value

The following are dummy values in JS. Therefore, if isBold is any of these values, it will return the false case of the ternary operator.

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

Use object syntax refactoring

For the above example, it would be better to use object syntax:

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

A better scenario for using ternary operators is to set up multiple classes.

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

Use && set the class

Let's look at another scenario to see if it works.

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

&& not only a logical operator, it can actually produce a value. Therefore, if isBold is true, then bold is returned. However, if isBold is an imaginary value, the value of isBold

Emphasize the last point-it will return the value of isBold Therefore, depending on isBold the value of 061a96511b2b02 is, our original problem with empty classes still exists. Let's look at some examples.

Example A: isBold is equal to false

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

This will still render empty classes😱

<div class></div>

Example B: isBold is equal to null

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

Since isBold is null , the empty class disappears 👍.

<div></div>

&& right-in fact, it just does its job. We just need a specific return value. In other respects, we cannot render empty classes, we must pass null or undefined . Any other imaginary values except these two are not acceptable. Because this is easy to miss, I prefer more explicit ternary operators, or just object syntax 👍.

Is the empty class attribute wrong?

I tried to use W3C Markup Validation Service to check, and both grammars can indeed pass.

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

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

Digging into the HTML standard: HTML Standard: Empty attribute syntax , it does not seem to allow empty attributes.

but...

But this validity does not apply to id . Because the empty id is considered invalid.

<!-- Fail -->
<div id>...</div>

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

<!-- Pass -->
<div id="name">...</div>
❌ Error: ID cannot be an empty string.

Summarize

Since the empty class is considered valid, and the specification does not object to it, all of these are up to you to choose. It is your code base, and you can decide what to do with it. If you want to keep the HTML output tidy, you can pass null to the Vue ternary operator. If it doesn't matter to you, then forget it. There is no correct answer here, it all depends on your preference👍

Talents’ [Three Lian] is the biggest motivation for Xiaozhi to keep sharing. If there are any errors or suggestions in this blog, we welcome talents to leave a message. Finally, thank you for watching.


code is deployed, the possible bugs cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://www.samanthaming.com/tidbits/96-vue-use-null-for-class/

comminicate

If you have dreams and dry goods, search for [Great Move to the World] Follow this brushing wit who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

阅读 1.4k

终身学习者
我要先坚持分享20年,大家来一起见证吧。
64.6k 声望
101.7k 粉丝
0 条评论
64.6k 声望
101.7k 粉丝
文章目录
宣传栏