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

This article mainly shows you "Vue dynamic binding classes to avoid empty class situation", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "Vue dynamic binding classes when how to avoid empty class situation" this article.

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

Option 1: use 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 an imaginary value, it returns an empty string''.

Html

Js

Data () {return {isBold: false}}

What the final rendering looks like:

If isBold is true, it will be rendered as:

Scenario 2: use null

Next, let's see what happens if we assign the class to null.

Html

Js

Data () {return {isBold: false}}

What the final rendering looks like:

If isBold is true, it will be rendered as:

Scenario 3: use undefined

By the way, undefined can also work.

Imaginary value

The following are the imaginary values in JS. Therefore, if isBold is any of these values, it returns the false of the ternary operator.

FalseundefinednullNaN0 "" or''or ``(empty string) uses object syntax refactoring

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

A better scenario for using ternary operators is to set up multiple classes.

Use & & to set the class

Let's look at another scenario and see if it works.

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

Emphasize the last point-it returns the value of isBold. Therefore, depending on what the value of isBold is, the problem that we used to have empty classes still exists. Let's look at some examples.

Example A:isBold equals false

This still renders the empty class

Example B:isBold equals null

Because isBold is null, the empty class disappears.

& & Yes-in fact, it's just getting the job done. It's just that we need a specific return value. In other ways, we can't render empty classes, we have to pass null or undefined. Any other imaginary value except these two is not good. Because this is easy to miss, I prefer a more explicit ternary operator, or just object syntax.

Is the empty class property wrong?

I tried to check with W3C Markup Validation Service, and both grammars did pass.

.

Dive into the HTML standard: HTML Standard: Empty attribute syntax, which does not seem to allow null attributes.

But.

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

.❌ error: ID cannot be an empty string. These are all the contents of this article entitled "how to avoid empty classes when Vue dynamically binds classes". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.