Why is it not recommended to use an empty string as a className in Vue?

Why is it not recommended to use an empty string as a className in Vue?

When we use a ternary expression to set a class for a DOM element, using an empty string will result in an empty class with no value being rendered. To avoid this, you can use null instead of an empty string.

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

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

Compare the empty string '' and null

Continue to analyze the above 2 lines of code

Case 1: Using an empty string ''

We use the ternary operator to decide whether to bind the class to the element. If isBold is true, it returns bold. Otherwise, it returns ''.

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

At this time, the rendering result is as follows

<div class></div>
<!-- 😱 Empty class -->

If isBold is true, the rendering result is as follows

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

Case 2: Using null

Look at the rendering results using null

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

data() {
  return {
    isBold: false
  }
}

The rendering results are as follows

<div></div>
<!-- ✅ Very good no empty class>

If isBold is false, the rendering result is as follows

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

Case 3: Using undefined

undefined has the same effect as null

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

<div></div>
<!-- ✅ Very good no empty class>

About False value

When the value of isBold is the following, the ternary expression also returns a false value

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

Bind class using object

Using objects is more readable

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

But the best use of ternary expressions is when binding complex classes.

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

Use && to bind class

Let's look at another situation

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

&& is not only a logical operator, it can also return a value, just like the code above, if isBold is true, it will return bold, but what if isBold is false?

Case 1: isBold is false

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

This time, an empty class is returned.

<div class></div>

Case 2: isBold is null

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

There will be no empty class when it is null

<div></div>

Case 3: isBold is undefined

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

There will be no empty class when it is undefined

<div></div>

The above situation is not caused by &&, it is only used to make judgments and return values.

So, if we want to avoid returning an empty class when using &&, it is best to use null or undefined.

But I recommend that you use object or array binding syntax to set the class.

Is it wrong to have an empty class?

In the W#C standard, empty classes are also allowed.

<!-- No Errors -->
<div class>...</div>

<!-- No Errors -->
<div>...</div>

HTML syntax does not prohibit the use of empty attributes.

However, for the sake of code readability, it is recommended that you do not use empty attributes, especially when you need to manipulate DOM attributes to make judgments.

Empty properties can easily lead to subtle errors

e.target.classList

e.className

img.src

...

but...
Empty id attributes are not allowed.

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

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

<!-- Correct -->
<div id="name">...</div>

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

This concludes this article on why it is not recommended to use an empty string as className in vue. For more information about using an empty string as className in vue, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Add axios component based on vue to solve the problem of null post parameters

<<:  Summary of Git commit log modification methods

>>:  Detailed explanation of MySQL database triggers

Recommend

How to modify the initial password of a user in mysql5.7

When users install MySQL database for the first t...

In-depth analysis of MySQL data type DECIMAL

Preface: When we need to store decimals and have ...

Detailed explanation of Nginx's control over access volume

Purpose Understand the Nginx ngx_http_limit_conn_...

A small introduction to the use of position in HTML

I just learned some html yesterday, and I couldn&#...

Mini Program to Implement Calculator Function

This article example shares the specific code of ...

How to draw the timeline with vue+canvas

This article example shares the specific code of ...

js implements random roll call

This article shares the specific code of js to im...

vue+rem custom carousel effect

The implementation of custom carousel chart using...

MySQL startup error InnoDB: Unable to lock/ibdata1 error

An error message appears when MySQL is started in...

How to use ssh tunnel to connect to mysql server

Preface In some cases, we only know the intranet ...

Linux service monitoring and operation and maintenance

Table of contents 1. Install the psutil package S...

The principle and application of ES6 deconstruction assignment

Table of contents Array destructuring assignment ...