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