O'Reilly logo

The Majesty of Vue.js by Kostas Maniatis, Alex Kyriakidis

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

v-else

When using v-if or v-show you can use the v-else directive to indicate an "else block" as you might have already imagined. Be aware that the v-else directive must follow immediately the v-if or v-show directive—otherwise it will not be recognized.

Using v-else with v-show:

<html> <head> <title>Hello Vue</title> </head> <body> <div id="app"> <h1 v-show="!message">You must send a message for help!</h1> <h2 v-else>You have sent a message!</h2> <textarea v-model="message"></textarea> <button v-show="message"> Send word to allies for help! </button> <pre> {{$data | json}} </pre> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Our king is dead! Send ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required