VueJS - Conditional Show And Hide

Previously we've seen in Vue how to display data to the page and how to bind data to a HTML attribute. In this tutorial we're going to use conditions to show or hide a div, for this example we're going to use a button to toggle whether to display the div or not. First lets build the page in HTML, it's going to be very simple just a div and a button.

<div id="app">
  <p>Message Can Be Seen!</p>
  <p><button class="btn btn-lg btn-primary">Toggle</button></p>
</div>

When you view the page you'll see the div with the message inside it, we want to build something in Vue to hide the div by default, then click the button to show the message then click the message again to show it. To do this in jQuery using the same HTML you'll need to use something like this.

$(document).ready(function(){
  $('p:first-child').hide();
  
  $('button').on('click', function(){
    $('p:first-child').toggle();
  });
});

Easy isn't it! The way VueJS works is just as easy as the jQuery method but the logic is split up into different places. This is the start to a different way of working with Vue over normal JavaScript and jQuery working. All the logic to perform the show and hide in jQuery is in JavaScript, leaving the HTML untouched. Whereas the logic with Vue is going to be in both the HTML and JavaScript. First we need to add some Vue directives to the HTML, a v-if on if the element is to be shown or hidden, then a click event on the button to toggle by using v-on:click.

<div id="app">
  <p v-if="seen">Message Can Be Seen!</p>
  <p><button class="btn btn-lg btn-primary" v-on:click="seen = !seen">Toggle</button></p>
</div>

As you can see we've changed the HTML to have a v-if with a seen value on the directive, this can be used as a data point by Vue, if seen is true the element will be shown, if seen is false the element will be hidden. Using the directive v-on:click with the value of seen = !seen, we're telling Vue that on the click event of this element to change the seen value. Because Vue is reactive it will watch for changes to seen and will show or hide the element accordingly. The advantage you get with this over jQuery is that you can add v-if="seen" to multiple elements and Vue will show or hide all of these on change of seen. With the HTML setup we can create the Vue object to handle this request.

var app = new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })

We add a data property of seen which is set to true, this means that the element will be shown. Then we create a method of toggle which will then check the value of the seen property and reverse it. As you can see the difference between VueJS development and jQuery development is that the logic isn't bound to a certain element. You create the logic in Vue and then you take advantage of this in the HTML by using this logic. Whereas in jQuery all your logic is bound to certain elements making it harder to expand on. We've been developing for years to split out the logic and keep HTML clean and move business logic into a different areas of the app. Now we're going back to the old way of working and placing logic in both HTML and JavaScript. This isn't a bad thing, it's actually easier to understand, just by reading the HTML you can see this has a click event of toggle, you can see that the message paragraph has a condition. You can understand the working of the presentation just by looking at HTML. When using jQuery you will need to search inside the JavaScript to understand the presentation.