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

This article focuses on "how to avoid using null as a null value of class in Vue". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to avoid using null as a null value of class in Vue".

Using null instead of passing an empty string may result in an empty class in the DOM output. In your ternary operator, you can return null. This will ensure that there are no empty classes in the DOM:

Compare empty string''with null

Let's delve deeper into the above example and get a fuller picture of what is happening.

(1) 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 this example, what we want to say is that if isBold is true, it will set the class to bold. If it is false, it will return an empty string "". Class is the abbreviation of v-bind:class.

Data () {return {isBold: false}}

This will render:

If isBold is true, it will render:

(2) option 2: use null /

Well, let's see what happens if null is assigned as the value of the class.

Data () {return {isBold: false}}

This will render:

If isBold is true, it will render:

(3) option 3: use undefined /

By the way, undefined can also work.

False value

As a reminder, these are the false values in JavaScript. Therefore, if isBold is any of these values, it returns the false condition of the ternary operator.

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

Refactoring using object syntax

In my simple example, it might be better to use object syntax, as follows:

I guess a better example of using ternary operators is to set up multiple classes.

Digression: when I create Demo, I always try to keep things simple. One way is to reduce visual noise as much as possible. As a result, my examples are sometimes oversimplified, hoping that readers can grasp the concept immediately without doing too much processing. The book Don't make me think gives me a lot of inspiration. All right, let's get back to the main course.

Use & & to set class

Let's explore another situation and see if it works.

& & is not just a logical operator that produces a Boolean value, it can actually produce a value. Therefore, this means that if isBold is true, bold is returned. However, if isBold is false, the value of isBold is returned.

Emphasize the last point-- it returns the value of isBold. So our original empty class problem can still exist, depending on what the value of isBold is. Let's take a look at some examples.

Example 1: isBold equals false /

This will still render the empty class

Example 2: isBold equals null /

Because isBold is null, the empty class disappears.

& & it's not wrong-in fact it's doing its job, but we need a specific return value. In other ways, we can't render empty classes, we have to pass null or undefined. Any other false value doesn't work, because it's easy to ignore, so I prefer a more explicit ternary operator or a simple object syntax.

Is the attribute of empty class bad?

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

......

Take an in-depth look at the HTML standard: null attribute syntax, which does not seem to prohibit null attributes.

But.

However, validity does not apply to id because an empty ID is considered invalid.

.........

❌ error: ID cannot be an empty string.

At this point, I believe you have a deeper understanding of "how to avoid using null as a null value of class in Vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.