Let's talk about how to avoid empty classes when dynamically binding classes in Vue!

Vue How to avoid empty classes in dynamic binding classes? The following article will introduce to you how to avoid empty classes when dynamically binding classes in Vue. I hope it will be helpful to you!

【Related recommendation: vuejs video tutorial】

Passing an empty string may cause the class in the DOM output to be null. In the ternary operator, we can return "null", which ensures that there is no empty class in the DOM?

<!-- ❌ -->
<div>
<!-- <div class> -->

<!-- ✅ -->
<div>
<!-- <div> --

Option 1: Use an empty string''

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

html

<div :class="isBold ? &#39;bold&#39; : &#39;&#39;"></div>

js

data() {
  return {
    isBold: false
  }
}

The final rendering looks like:

<div class></div>
<!-- ? 啊！ 空的class --><p>If<code> isBold</code> is <code>true</code> and will be rendered as: </p>
<pre class="brush:php;toolbar:false"><div></div>

Option 2: Use null

Next, let’s see if we give What happens when a class is assigned a value of null.

html

<div></div>

js

data() {
  return {
    isBold: false
  }
}

The final rendering looks like:

<div></div>

If isBold is true and will be rendered as:

<div></div>

Solution 3: Use undefined

By the way, undefined also works fine Working?

<div></div>

<div></div>

Virtual Values

The following are virtual 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)

Refactoring using object syntax

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

<div></div>

A better scenario for using the ternary operator is Set up multiple classes.

<div></div>

Using && Setting Class

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

<div></div>

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

Emphasis on the last point - it will return the value of isBold. So depending on what the value of isBold is, our original problem of having an empty class still exists. Let's look at some examples.

Example A: isBold is equal to false

<div></div>

This will still render the empty class?

<div></div>

Example B: isBold is equal to null

<div></div>

Since isBold is null, the empty class disappears?.

<div></div>

&&That's right - actually, it just does its job. It's just that we need a specific return value. In other respects, we cannot render empty classes, we must pass null or undefined. Any other false values ​​other than these two will not work. Since this is easy to miss, I would prefer the more explicit ternary operator, or just object syntax?

Is the empty class attribute wrong?

I tried using W3C Markup Validation Service to check, and both syntaxes indeed passed.

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

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

Drilling down into the HTML Standard: HTML Standard: Empty attribute syntax, it doesn't seem to allow empty attributes.

But...

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

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

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

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

❌ Error: ID cannot be an empty string.

Summary

Since empty classes are considered valid and the spec doesn't object to it, it's all your choice. It's your codebase and you decide what to do with it. If you want to keep your HTML output clean, you can pass null to the Vue ternary operator. If it doesn't matter to you, forget it. There is no right answer here, it all depends on your preference?

(Learning video sharing: web front-end development, Basic programming video)