Home / Web Design / JavaScript / Conditional Rendering with v-if and v-show

Conditional Rendering with v-if and v-show

VueJs is a small, flexible JavaScript library that allows developers to build interactive web applications quite easily through an API that is simple and easy to pick up. It shares some similarities and a number of differences with other libraries/frameworks like Angular, React, Ember, Polymer, and Riot to name a few. However Vue prides itself on it’s simplicity, performance, flexibility and being less opinionated. The VueJs website has a more in depth comparison with other libraries and frameworks which you can read about here, if you’re interested.

This tutorial aims to give you an overview of some of the basic concepts and features through practical examples. In future tutorials we’ll be looking at more advanced features and building scalable applications with Vue.

Conditional Rendering with v-if and v-show

Let’s say you wish to display a generic welcome message to your user if they are logged in or show them a login form if they are not already logged in. Vue makes this quite easy using the v-if and v-show directives, so let’s take a look at how we can accomplish this.

Using what we learned in the previous section about handling events with the v-on directive, we will create a simple login method that toggles the value of isLoggedIn between true and false when the user clicks the login or logout button.

As the value of isLoggedIn changes, Vue will automatically re-evaluate the condition in the v-if directive and render the correct part of the content based on that condition.

...

<body>

<div id="vue-instance">
  <div v-if="isLoggedIn">
    Welcome to coligo!
    <button @click="login" type="submit">Logout</button>
  </div>
  <div v-else>
    <input type="text" placeholder="username">
    <input type="password" placeholder="password">
    <button @click="login" type="submit">Login</button>
  </div>
</div>

<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>

<script>
  var vm = new Vue({
    el: '#vue-instance',
    data: {
      isLoggedIn: false
    },
    methods:{
      login: function(){
        // 'this' refers to the vm instance
        this.isLoggedIn = !this.isLoggedIn;
      }
    }
  });
</script>

</body>

...

v-show can be used in pretty much the same was as v-if and you can see that for yourself by replacing the v-if in the pervious example with a v-show like so:

<div id="vue-instance">
  <div v-show="isLoggedIn">
    Welcome to coligo!
    <button @click="login" type="submit">Logout</button>
  </div>
  <div v-else>
    <input type="text" placeholder="username">
    <input type="password" placeholder="password">
    <button @click="login" type="submit">Login</button>
  </div>
</div>

However, the difference is in the way they show and hide content:

v-show will always render the content regardless of the truthy-ness of the expression value whereas v-if will only render the content if the expression is true.

Also, each time the value of the expression toggles between true and false, v-if will completely destroy and reconstruct the element whereas v-show will simply toggle the CSS display property of that element to show and hide it.

Although these differences may not seem significant to you at the moment, they are worth keeping in mind when evaluating performance considerations for larger applications you develop. The VueJs guide summarizes it as follows:

Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.

About Yesaya R. Athuman

Colleagues know me as a highly Creative Software Developer who can always be trusted to come up with the new approach. But I know that client's business come first, and I never try to impose my ideas on others. Instead, I spend a lot of time understanding business and the audience before suggesting ideas. I can (and often do) work well alone, but I'm at my best collaborating with others.

Check Also

Take Your CSS Experience to the Next Level with SASS

Take Your CSS Experience to the Next Level with SASS

Beginners or those who have taken a break from web design for a few years …