Vue.js v-show

In this tutorial you’ll learn how to conditional rendering using v-show.

If you’re already familiar with the v-if directive, you’ll see that v-show is very similar.

v-show directive is used for conditional rendering of the DOM element. The difference is that v-show will always render the element and keep it in the DOM. It will hide an element by toggling the display CSS property of the element.

Whereas, if false, v-if will not render an element in the DOM.

v-show example in Vue.js

HTML

<div id="app">
  <h1 v-if="loggedIn">Welcome back!</h1>
  <h1 v-else>Please log in.</h1>
</div>

Vue.js

new Vue({
  el: "#app",
  data: {
    loggedIn: false
  }
})

Result

If we change change loggedIn to true, the output will be:

We’re using v-else directive to render an “else block” for v-if. You can also use v-else-if directive to chain your v-if statement.

In some cases, you’ll choose v-show directive over v-if. I personally use v-if 90% of the time. Just to prevent leaking of sensitive data and keep the DOM clean.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-v-show

PS: Make sure you check other Vue.js tutorials.