Shulou(Shulou.com)06/03 Report--

This article shows you why an empty string is not recommended as a className in vue. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

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

Compare the empty string''with null

Continue to analyze the above two lines of code

Case 1: use an empty string''

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

Data () {return {isBold: false}}

At this point, the rendering results are as follows

If isBold is true, the rendering is as follows

Case 2: using null

Take a look at the rendering using null

Data () {return {isBold: false}}

The rendering results are as follows

.

The syntax of HTML does not require that empty attributes are not allowed.

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

Empty attributes can easily cause imperceptible errors

E.target.classList

E.className

Img.src

...

But.

Empty id property is not allowed

.

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

The above is why an empty string is not recommended as a className in vue. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.