Vue v-show Directive

Conditional Visibility

The v-show directive hides an element when the condition is 'false' by setting the CSS 'display' property value to 'none'.

After writing v-show as an HTML attribute we must give a conditon to decide to have the tag visible or not.

In the code above, 'showDiv' represents a boolean Vue data property with either 'true' or 'false' as property value. If 'showDiv' is 'true' the div tag is shown, and if it is 'false' the tag is not shown.

v-show vs. v-if

The difference between v-show and v-if is that v-if creates (renders) the element depending on the condition, but with v-show the element is already created, v-show only changes its visibility.

Therefore, it is better to use v-show when switching visibility of an object, because it is easier for the browser to do, and it can lead to a faster response and better user experience.

A reason for using v-if over v-show is that v-if can be used with v-else-if and v-else.

In the example below v-show and v-if are used separately on two different <div> elements, but based on the same Vue property. You can open the example and inspect the code to see that v-show keeps the <div> element, and only sets the CSS display property to 'none', but v-if actually destroys the <div> element.

<div id="app">
  <div id="lightDiv">
    <div ="lightOn"></div>
    <img src="img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">Switch light</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        lightOn: false
      }
    }
  })
  app.mount('#app')
</script>