Why is it not recommended to use an empty string as className in vue
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.
