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

Nginx monitoring issues under Linux

nginx installation Ensure that the virtual machin...

mysql 5.7.19 latest binary installation

First download the zip archive version from the o...

Case analysis of several MySQL update operations

Table of contents Case Study Update account balan...

CocosCreator Skeleton Animation Dragon Bones

CocosCreator version 2.3.4 Dragon bone animation ...

Practice of dynamically creating dialog according to file name in vue+el-element

Table of contents background accomplish 1. Encaps...

Three ways to draw a heart shape with CSS

Below, we introduce three ways to draw heart shap...

Pure CSS to achieve the effect of picture blinds display example

First, let me show you the finished effect Main i...

BUG of odd width and height in IE6

As shown in the figure: But when viewed under IE6...

Implementation steps of vue-element-admin to build a backend management system

Recently, when I was working on a conference heal...

js implements a simple shopping cart module

This article example shares the specific code of ...

Linux operation and maintenance basics httpd static web page tutorial

Table of contents 1. Use the warehouse to create ...

Introduction to JavaScript conditional access attributes and arrow functions

Table of contents 1. Conditional access attribute...