Displaying and hiding an element conditionally

Displaying and hiding an element on a web page is fundamental to some designs. You could have a popup, a set of elements that you want to display one at a time, or something that shows only when you click on a button.

In this recipe, we will use conditional display and learn about the important v-if and v-show directives.

Getting ready

Before venturing into this recipe, ensure that you know enough about computed properties or take a look at the Filtering a list with a computed property recipe.

How to do it...

Let's build a ghost that is only visible at night:

<div id="ghost"> 
  <div v-show="isNight"> 
    I'm a ghost! Boo! 
  </div> 
</div>

The v-show guarantees that the <div> ghost will be displayed only when isNight is true. For example, we may write as follows:

new Vue({ 
  el: '#ghost', 
  data: { 
    isNight: true 
  } 
})

This will make the ghost visible. To make the example more real, we can write isNight as a computed...