V-Hide

Example

Vue.js is a great tool. Out of the box it provides you with two options for conditional rendering: v-if and v-show.

These two options are great, if not all you need for conditional rendering in your projects.

v-if: will completely remove the component from the HTML DOM

v-show: will apply the style display: none; to the component's container

Both of these options perform as advertised however both will completely remove the DOM from rendering. Sometimes you would like to hide the element but keep its rendered 'space' in the DOM for layout purposes. v-hide facilites this.

v-if example:

Notice when you toggle div-a on and off with v-if the space occupied in the DOM layout disappears and div-b shifts left.

v-if = true

div-a

div-b

v-show example:

Notice when you toggle div-a on and off with v-show the space occupied in the DOM layout disappears and div-b shifts left.

v-show = true

div-a

div-b

v-hide example:

Notice when you toggle div-a on and off with v-hide the space occupied in the DOM layout DOES NOT disappears and div-b stays put.

v-hide = false