V-If, V-Else, and V-Show in Vue.js

Vue conditionals are useful for hiding and displaying features on your website or for toggling between different features.

Prerequisites

  • Vue.js 2.0 installed
  • Bootstrap installed

V-If

The goal of this tutorial is to display only certain portions of a website by clicking a button. I initially want the content between some div’s to remain hidden, then I want a user to click a Display Success! button, and finally I want the content between the div’s to display on the page or disappear as the Display Success! button is clicked.

I’m going to start by building a button that asks whether or not a person is a success, along with some random content inside a div.

<h1>Are You A Success?</h1>
<button class="btn btn-success">Display Success!</button>
<div>
  <h1>YES!!!!!!!!</h1>
  <p>You're a success</p>
</div>

Then I’m going to create a variable in the data field of my Vue instance called showSuccess and I’m going to set it equal to false.

<script>
  new Vue({
    el: "#app",
    data: {
      showSuccess: false
    }
  })
</script>

Next I’m going to attach the v-if conditional to the div holding the content I want to display and set that equal to showSuccess.

<div v-if="showSuccess">

Then I will create an on click event listener for the button that calls a function called toggleSuccess.

<button class="btn btn-success" @click="toggleSuccess">Display Success!</button>

Finally, I will create the toggleSuccess function that’s needed to make the div’s content toggle on and off. Inside this function I set the showSuccess variable to equal not the showSuccess variable. The word “this” grants you access to data objects that are in the DOM and in Vue’s data object.

  methods: {
    toggleSuccess: function(){
      this.showSuccess = !this.showSuccess
    }
  }

Open your file up on your browser and click the Display Success! button, it should toggle back and forth.

V-Else

Vue’s v-else can be used to toggle between two different visuals you may want to display.

I’ve added another div with some additional content inside of it. Attached to the div is the conditional v-else.

 <div v-else>
   <h1>NO!!!!!!!</h1>
   <p>You're not a success</p>
 </div>

Now if I open up the browser, the content in the v-else statement should be displayed, and when I click the Display Success! button, it will remove the content in the v-else and then add the content in the v-if.

V-Show

The v-show function will “visually” give the user the same experience as v-if. I will create a third div that has v-show attached to and I will set that equal to showSuccess.

 <div v-show="showSuccess">
   <h1>Show</h1>
   <p>Success</p>
 </div>

In the browser the content in the v-show div will display alongside the content in the v-if div.

The Difference Between V-If and V-Show

What’s the difference between v-if and v-show?

The v-if conditional completely attaches or detaches whatever condition you’ve set up in the DOM. V-show doesn’t detach from the DOM, instead a CSS style tag is added and set equal to display: none;. In terms of performance the fewer elements in the DOM, the faster your performance should be. So unless you have a specific reason for needing the element in the DOM, v-if should be used instead as it is faster.

Here is a final look at all of the code.

<div id="app">
  <h1>Are You A Success?</h1>
  <button class="btn btn-success" @click="toggleSuccess">Display Success!</button>
  <div v-if="showSuccess">
    <h1>YES!!!!!!!!</h1>
    <p>You're a success</p>
  </div>
  <div v-else>
    <h1>NO!!!!!!!</h1>
    <p>You're not a success</p>
  </div>
  <div v-show="showSuccess">
    <h1>Show</h1>
    <p>Success</p>
  </div>
</div>

<script>
 new Vue({
   el: "#app",
   data: {
     showSuccess: false
   },
   methods: {
     toggleSuccess: function(){
       this.showSuccess = !this.showSuccess
     }
   }
 })
</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s