-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Vue.js 2 Cookbook
By :

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.
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.
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...