Vue.js Conditional Rendering

v-if

When we want to conditionally render a block we use the v-if directive. The block will not be rendered if the directive's expression does not have a truthy value.

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

We can also add an "else-block" using the v-else:

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else">Oh No it is more than Awesome</h1>

Conditional Groups with v-if on <template>

Since v-if is a directive, it will have to be attached to a single element. How do you go about toggling more than one element? In such case we have to use the v-if on a <template> element,

This will serve as an invisible wrapper. The final result that will be rendered, will not include the <template> element.

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

v-else

we use the v-else directive to indicate an else-block for v-if:

<div v-if="Math.random()> 0.5">
I am Visible
</div>
<div v-else>
I'm now Invisible
</div>

If a v-else element does not immediately follow a v-if or a v-else-if element, it will not be recognized.

v-else-if

The v-else-if is an else-if implementation for v-if, It can be chained a multiple times:

<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>

A v-else-if should immediately follow a v-if or a v-else-if element.

Controlling Reusable Elements with key

Vue will always try to help us render our element as efficient as possible, and prefers to reuse them rather than building them from scratch.

This not only makes Vue very fast, it has other useful advantages. For instance, it can allow users to toggle between multiple login types:

<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>

When we switch the loginType in the snippet above, the data previously entered by the user will be preserved.

The above scenario is cool but sometimes it is not desired, if we don?t want to reuse the elements, we add a key attribute with 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

Alternatively, we can use the v-show directive for displaying an element. The usage is same to a large extent:

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

v-show neither support template element nor v-else.

v-if vs v-show

v-if ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles and thus implements real conditional rendering.

v-if is lazy: it will not do anything if the condition is false on initial render, it stays this way until the condition becomes true for the first time.

v-show on the other hand is simpler- regardless of the initial condition, the element is always rendered.

In general, the v-if has a higher toggle costs whereas the v-show has a higher initial render costs.

v-for with v-if

it is always tempting to use v-if and v-for together, however it is not recommended. However, note that when used together with v-if, the v-for directive has a higher priority than the v-if.

Previous: Vue.js Class and Style Bindings: Dynamically Manage CSS
Next: Vue.js List Rendering.