Basic use of v-if, v-if-else, v-else-if and v-show in Vue

1. Conditional rendering of Vue

1.-if

⭐⭐

If, as the name suggests, if one condition is met, the following steps are performed, which is the same as the basic syntax we learned, but I changed it a little in Vue here.

v-if="condition"If the content after the condition is true will be rendered only if it is rendered

<div class="info" v-if="(info).length">
        <h2>personal information</h2>
        <ul>
          <li>Name：{{}}</li>
          <li>age:{{}}</li>
        </ul>
 </div>

 The rendering principle of v-if:

• v-if is lazy;
• When the condition is false, the content of its judgment will not be rendered or destroyed at all;
• Only when the condition is true will the content in the condition block be rendered;

1.-if-else

⭐⭐

v-if-else

We can think of the basic syntax if else

Yes, the same is true

v-if="condition" If the condition is not satisfied, execute else

<div class="info" v-if="(info).length">
   <h2>personal information</h2>
</div>

 <div v-else>
  	<h2>没有输入personal information</h2>
 </div>

1.-else-if

⭐⭐

v-else-if and if

And v-else-if can be used multiple times (usually used in many cases)

v-else-if can only be used with if

<h1 v-if="score > 90">excellent</h1>
<h2 v-else-if="score > 80">good</h2>
<h2 v-else-if="score >= 60">Pass</h2>
<h2 v-else>不Pass啦</h2>

1. Elements

⭐⭐

template: the meaning of template

When we don't want elements like div to be rendered, we can use template

Because template is used as a placeholder to wrap elements, it is not rendered
 
Note: Each component root template (the outermost template) can only have one child element, and there is no limit on non-root template.

template element can be treated as an invisible wrapping element and is used on v-if, butThe template will not be rendered in the end:

<template v-if="(info).length">
        <h2>personal information</h2>
        <ul>
          <li>Name：{{}}</li>
          <li>age:{{}}</li>
        </ul>
      </template>

<template v-else>
        <h2>没有输入personal information</h2>
</template>

 1.-show

⭐⭐

v-show is the same as v-if

<div v-show="isShowCode">
        <img
          src="/obj/static/xitu_juejin_web/img/app_download_QR."
          alt=""
        />
</div>

1. The difference between -show and v-if

⭐⭐

Difference between v-if and v-show

Usage:

v-show does not support template; v-show cannot be used with v-else

The difference in essence：

Whether the v-show element needs to be displayed on the browser or not, its DOM actually exists, and it is just switched through the display attribute of CSS; when v-if is false, its corresponding native will not be rendered into the DOM at all;

How to choose

If our native needs to switch frequently between display and hide, then use v-show; if there is no frequent switch, then use v-if;

v-if

• is a true conditional rendering, because it ensures that the ** event listeners and subcomponents within the event are properly destroyed and rebuilt during the switch.
• It is lazy: if the event is false during initial rendering, nothing will be done until the condition becomes true for the first time, the condition block will start rendering.

v-show

Compared to v-show, the elements are always rendered regardless of the initial conditions, and they are simply switched based on css.

Use of both

Generally speaking, v-if has higher switching overhead, and v-show has higher initial render overhead, so it is better to use v-show if it needs to switch very frequently; it is better to use v-show if the running conditions are rarely changed.

Summarize

This is the article about the basic use of v-if, v-if-else, v-else-if and v-show in Vue. For more related contents of Vue v-if, v-if-else, v-else-if, v-show, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!