8. Conditional rendering Part 2 (v-if and v-show)

Don’t we already have enough directives to handle conditional rendering? Do we still need v-show? One more thing to trouble our brains with?

But what to do? Evan You (creator of Vue) added it for some reason while we were busy binge-watching Netflix. So, let’s see why this directive exists in the first place. Warning: This post is a continuation of “Conditional rendering Part 1” and hence I would recommend you to get a good hold of those concepts before proceeding any further.

We discussed that v-if, v-else etc. can not only be applied to individual HTML elements but also to a block of elements using <div> or <template> etc. Let us first see an example with the <template> element and understand how it behaves as an invisible wrapper to the final result that is rendered to the DOM.

Using <template> element

Let us wrap a heading and a paragraph inside the <template> element and give it a condition using v-if directive. Along with that, let us also add another paragraph without any conditions.

Firstly, add display property to the Vue instance’s data object and give it a value of true.

data: {
    display: true
  }

Secondly, make below changes to the index.html file,

      <template v-if="display">
        <h1>Welcome</h1>
        <p>Hi there!</p>
      </template>
      <p>How are you doing?</p>

If you see the output since the display is set to true, if condition evaluates to true and the elements within the template block are displayed.

What is interesting to note here is, if you open the developer tools of your browser (Ctrl+Shift+I or F12 in Chrome browser) and see in the elements tab, the <template> element will not be included. It magically became invisible!

Sticky note: When the v-if condition evaluates to false, the entire element will be detached/removed from the DOM. This is mostly the preferred behavior when an element is not required in our applications as having a lesser number of elements in the DOM will improve its performance.

The v-show directive

Life as a developer is so unpredictable! We often face situations where we would want to frequently show and hide an element i.e. toggle on and off on the webpage. In such scenarios, it is best to use v-show directive.

Reason for using v-show

This directive will make sure that the element is always present in the DOM. It will be shown if the condition is truthy (evaluates to true). When the condition evaluates to false, the element will be hidden by the automatic addition of a CSS property, display: none! Doesn’t it sound interesting?

This concept might prove to be a little tough to wrap our heads around. Don’t worry! I have got you covered. Examples and screenshots to our rescue!

In the previous example, let us add v-show directive to the second paragraph tag.

<p v-show="display">How are you doing?</p>

When the display is true, both v-if and v-show behave in a similar manner. The browser output and the developer tools show the same result as before (Refer the two images shown under “Using <template> element” heading). No surprises here!

Let us change the value of display property to false. Our complete code looks as follows,

Index.js

var app = new Vue({
  el: "#app",
  data: {
    display: false
  }
});

Index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
    <!-- including Vue with development version CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <template v-if="display">
        <h1>Welcome</h1>
        <p>Hi there!</p>
      </template>
      <p v-show="display">How are you doing?</p>
    </div>
    <!-- including index.js file -->
    <script src="index.js"></script>
  </body>
</html>

With that out of the way, let us proceed to see the browser output and developer tools results.

As expected, nothing gets rendered to the webpage as both v-if and v-show conditions evaluate to false. Nothing magical here as well. But when we open the developer tools and take a keen look at the ‘Elements’ pane, there is a lot to decode.

The <template> element (containing the <h1> and <p> elements) with the v-if directive is removed from the DOM when it evaluates to false.
The second <p> element with the v-show directive only toggles the visibility of the element using the CSS display property. The element is always attached to the DOM and is always rendered. It is just made invisible. That’s all!

Watch out!

Using v-show with <template> element won’t work as it is not supported. Also, it doesn’t work with v-else (if and else are soul mates, you know?! Not, show and else!)

So, should I use v-if or v-show?

Good question! Use v-show if you want to toggle something pretty often as the element is always present in the DOM, regardless of whether the initial condition evaluates to true or false. Only the visibility is toggled with the help of CSS display property. Hence, the initial render cost is higher.

Use v-if when its condition doesn’t frequently change/toggle especially during runtime. Because attaching and detaching an element often might become costly here. Also ,remember that v-if is lazy, i.e. if the condition evaluates to false on initial rendering, the element or the block won’t be rendered at all until the condition becomes true for the first time.

Still feel a little foggy in your head? Don’t you worry! Practice is the key here. Grab your wizard hat and wand, try a few spells (sample scenarios) and you will master it! By the way, all the code discussed above is available in the GitHub repo

Have a great day ahead!