Vue.js 2 Cookbook

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 property:

new Vue({     el: '#ghost',     computed: {       isNight () {         return new Date().getHours() < 7     }   } })

If you load this program in JSFiddle, you will see the ghost only after midnight and before 7:00. If you really can't wait to see the ghost, you can cheat and insert a time in the night, for example:

 return (new Date('4 ...