Vue.js 2.0 condition rendering

v-if

The v-if instruction is used to conditionally render a piece of content. This content is rendered only when the expression of the instruction returns a truthy value.

<h1 v-if="awesome">Vue is awesome!</h1>

You can also add an "else block" with v-else:

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ????</h1>

Render the grouping using the v-if condition on the element

Because v-if is an instruction, it must be added to an element. B ut what if you want to switch multiple elements? A t this point, you can think of an element as an invisible wrapper element and use v-if on it. The final rendering result will not contain the element of the slt;template.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else

You can use the v-else instruction to represent the "else block" of v-if:

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

The v-else element must follow the element with v-if or v-else-if, otherwise it will not be recognized.

v-else-if

2.1.0 New

v-else-if, as the name implies, acts as the "else-if block" of v-if and can be used continuously:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

Similar to v-else, v-else-if must also follow elements with v-if or v-else-if.

Use key to manage reusable elements

Vue renders elements as efficiently as possible, often using existing elements instead of rendering from scratch. I n addition to making Vue very fast, there are other benefits. For example, if you allow users to switch between different sign-in methods:

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

Switching loginType in the code above will not clear what the user has already entered. Because the two templates use the same elements, the placeholder will not be replaced .

Try it yourself, enter some text in the input box, and press the toggle button:

Username Toggle login type

This isn't always what you need, so Vue gives you a way to say, "These two elements are completely independent, don't use them again." Simply add a key attribute with a unique value:

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-show

Another option for presenting elements based on conditions is the v-show instruction. The usage is roughly the same:

<h1 v-show="ok">Hello!</h1>

The difference is that elements with v-show are always rendered and remain in the DOM. v-show simply switches the CSS property display of the element.

Note that v-show does not support the elements, nor does it support v-else.

v-if vs v-show

v-if is a "real" conditional rendering because it ensures that event listeners and sub-components within the conditional block are properly destroyed and rebuilt during the switching process.

v-if is also lazy: if the condition is false at the time of initial rendering, nothing is done - the condition block does not start rendering until the condition first becomes true.

V-show, by contrast, is much simpler -- no matter what the initial conditions are, elements are always rendered and simply switch based on CSS.

In general, v-if has a higher switching overhead, while v-show has a higher initial rendering overhead. Therefore, it is better to use v-show if you need to switch very frequently, or v-if if conditions rarely change at runtime.

v-if is used with v-for

It is not recommended to use both v-if and v-for.

When v-if is used with v-for, v-for has a higher priority than v-if.

v-if vs. v-show

v-if is a true conditional rendering because it ensures that the conditional block properly destroys and rebuilds event listeners and sub-components within the conditional block during the switchover.

v-if is also lazy: if the condition is false at the time of initial rendering, nothing is done - local compilation begins the first time the condition becomes true (compilation is cached).

By contrast, v-show is much simpler - elements are always compiled and preserved, simply based on CSS switching.

In general, v-if has a higher switching consumption and v-show has a higher initial rendering consumption. Therefore, if you need to switch frequently to use v-show, it is better to use v-if if the conditions are unlikely to change at runtime.