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

In this point you might ask "What about the v-if directive we mentioned earlier?". So, at this point we will build the previous example again, only this time we'll use v-if!

<html>
<head>
    <title>Hello Vue</title>
</head>
<body>
<div id="app">
    <h1 v-if="!message">You must send a message for help!</h1>
    <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 help!'
        }
    })
</script>
</html> 

As shown, the replacement of v-show with v-if works just as good as we thought. Go ahead and try to make your own ...

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