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