The Vue v-if command that must be known to the front end is detailed

Vue v-if directive

Using the v-if directive to create HTML elements based on conditions in Vue is much easier than using pure JavaScript.

With Vue, you just need to write if statements directly in HTML elements you want to create conditionally. It's that simple.

Conditional Rendering in Vue

Conditional rendering in Vue is done using the v-if, v-else-if, and v-else directives.

Conditional rendering refers to creating HTML elements only when the condition is true, that is, if the variable is "true", the text is created "stocked" and if the variable is "false", the text is created "out of stock".

Example

Write different messages depending on whether there are any typewriter stocks:

<p v-if="typewritersInStock">
In stock
</p>

<p v-else>
out of stock
</p>

Conditions in Vue

A condition or "if statement" is true or false.

The condition is usually a comparison check between two values, as shown in the example above to see if one value is greater than the other.

We use comparison operators (such as <, >= or !==) for such checks.

Comparative checks can also be used in conjunction with logical operators such as && or ||.

We can use the number of typewriters in storage and comparison checks to determine if they are available:

Example

Use the comparison check to decide whether to write "in stock" or "out of stock" based on the number of typewriters in storage.

<p v-if="typewriterCount > 0">
In stock
</p>

<p v-else>
out of stock
</p>

Conditional Rendering Directive

To view the examples containing all three of the above instructions, we can use v-else-if to extend the previous example so that users can see "In stock", "Small left!" or "out of stock":

Example

Use a comparison check to decide whether to write "In stock", "Small remaining!" or "out of stock" based on the number of typewriters in storage.

<p v-if="typewriterCount>3">
In stock
</p>

<p v-else-if="typewriterCount>0">
Very little left！
</p>

<p v-else>
out of stock
</p>

Use the return value of the function

Instead of using the v-if directive comparison check, we can use the function's "true" or "false" return value:

Example

If a text contains the word "pizza", create a<p>Label. The ‘includes()’ method is a native JavaScript method that checks whether text contains certain words.

<div >
<p v-if="('pizza')">Text contains words 'pizza'</p>
<p v-else>No word found in the text 'pizza'</p>
</div>
data() {
return {
text: 'I love tacos, pizza, Thai beef salad, pho soup and taji pot.  '
}
}

The above example can be extended to show that v-if can also create other tags, such as<div>and<img> Label:

Example

If a text contains the word 'pizza', create a pizza image with<div>Tags and a message<p>Label. The ‘includes()’ method is a native JavaScript method that checks whether text contains certain words.

<div >
<div v-if="('pizza')">
<p>Words are included in the text“pizza”</p>
<img src="img_pizza.svg">
</div>
<p v-else>No word found in the text“pizza”</p>
</div>

<script src="/vue@3/dist/"></script>
<script>
const app = ({
data() {
return {
text: 'I love taco, pizza, Thai beef salad, pho soup and taji pot.  '
}
}
})
('#app')
</script>

The following examples are further expanded.

Example

If a text contains the words "pizza" or "burrito" or does not contain these words, different images and text are created.

<div >
<div v-if="('pizza')">
<p>Words are included in the text“pizza”</p>
<img src="img_pizza.svg">
</div>
<div v-else-if="('burrito')">
<p>Words are included in the text“burrito”，But does not include“pizza”</p>
<img src="img_burrito.svg">
</div>
<p v-else>No word found in the text“pizza”or“burrito”</p>
</div>

<script src="/vue@3/dist/"></script>
<script>
const app = ({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and taji pot.  '
}
}
})
('#app')
</script>

With Vue, we can now write code that creates elements under specific conditions, which is easier than using traditional JavaScript.

Why is v-for more priority?

Vue's designers choose to letv-forThe priority is higher thanv-if, mainly to meet the needs of intuitive logic and performance optimization:

• Logical intuition：v-forUsed to generate a list, andv-ifUsed for conditional filtering. Create a list and then filter the items that meet the conditions. This order is more in line with human thinking habits.

• Performance optimization: If executed firstv-if, may result in unnecessary loop calculations becausev-ifThe conditions of the cyclic variable may depend on the cyclic variable, which is inv-forOnly available after execution.

Summarize

This is the article about the detailed explanation of the Vue v-if command of the front-end must-know V-if command. For more detailed explanation of the Vue v-if command, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!