Vue.js Simplified - Conditional Rendering (#4)

Introduction

Vue.js has the following conditional-style directives that can be used to influence what elements are visible on the page:

v-if
v-else-if
v-else
v-show

Examples: if/else/else-if

Single if:

<p v-if='answer != ""'>Your answer: {{ answer }}</p>

if with else:

<p v-if='answer != ""'>Your answer: {{ answer }}</p>
<p v-else>Please enter an answer.</p>

Chained if, else-if, else:

<p v-if='answer != ""'>Your answer: {{ answer }}</p>
<p v-elseif='correct'>You got it!</p>
<p v-elseif='!correct'>Sorry, that is incorrect - try again.</p>
<p v-else>Please enter an answer.</p>

Order matters:

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

For example, the following would not work and would produce an error in the console:

<p v-if='answer != ""'>Your answer: {{ answer }}</p>
<p>Feedback:</p>
<p v-elseif='correct'>You got it!</p>
<p v-elseif='!correct'>Sorry, that is incorrect - try again.</p>
<p v-else>Please enter an answer.</p>

HTML template element

In all of the above examples, our elements contained minimal content - mostly just a string of text. However, there’s no reason you can’t conditionally render groups of content/elements as we saw in our FlashWord example, e.g.:

<div v-if='showFeedback'>
    <p v-if='correct' class='correct'>
        You got it!</p>
    <p v-else class='incorrect'>
        Sorry, that is incorrect - try again.
    </p>
</div>

In the above example, we grouped together the content using a generic div element, but you can also use HTML’s content template element which is designed for JavaScript-loaded content.

The HTML Content Template (<template>) element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript. -ref

Example:

<template v-if='showFeedback'>
    <p v-if='correct' class='correct'>
        You got it!</p>
    <p v-else class='incorrect'>
        Sorry, that is incorrect - try again.
    </p>
</template>

v-show

The v-show directive is similar to v-if in that you can conditionally display elements. The difference is how the elements are displayed/not displayed.

If v-if is given a false value, the element is not actually rendered in the DOM.

If v-show is given a false value, the element is rendered in the DOM, it’s just hidden with CSS.

<p v-if='false'>Example A</p>

<p v-show='false'>Example B</p>

Below is a snapshot what the DOM looks like from the above code. Note how Example A is not present, while Example B is present with a CSS style of display:none;.

v-show vs v-if

The v-show directive can slow down the initial page render, because the element is rendered to the DOM, even if it’s not yet needed.

However, v-show is ideal for elements that may be toggled on/off often, because it does not require adding/removing the element from the DOM like v-if does.

Given this, it’s best to use v-show for elements that will toggle often, and v-if for elements that won’t.

Examples:

Use v-show for toggling on/off a notification module
Use v-if for showing the logged in state of a user