Conditional Rendering in Vue.js

There has been a lot of buzz about Vue.js recently. I started of with some basics.Today I’ll talk about how to dynamically show and hide DOM components based on some conditions.

If you are not aware of Vue.js, I’ll highly recommend you to get started with this awesome javascript framework (mostly used for frontend). It has best of both Angular and React.

In this post, I’ll be covering some of the conditional basics using v-if,v-else,v-if-else.

I’ll recommend to try this out practically so that you just don’t read and forget, rather remember the basics.

Open your favorite editor and create two files —

// index.html
// Vue.js CDN
<script src=”https://unpkg.com/vue/dist/vue.js"></script>
<div id=”app”>
 <p>I am visible!</p>
</div>

Open it in your browser, you’ll see a simple text — “I am visible”

Let’s add some logic to you guessed it right, conditionally disappear it.

Let’s create app.js

new Vue({
 el: '#app',
 data: {
  show: false
 }
})

Now, modify our index.html a bit

// index.html
// Vue.js CDN
<script src=”https://unpkg.com/vue/dist/vue.js"></script>
<div id=”app”>
 <p v-if="show">I am visible!</p>
 <button type="button" @click="show = !show">Show/Hide</button>
</div>

Go back to browser and reload —

Try clicking the Show/Hide button — “I am visible” is no more visible 😛 So, what happened here is that we added a data property show=false , which causes p tag to be removed. Thus by using v-if , we can add a custom condition to a tag.

Again modify index.html

// index.html
// Vue.js CDN
<script src=”https://unpkg.com/vue/dist/vue.js"></script>
<div id=”app”>
 <p v-if="show">I am visible!</p>
 <p v-else>I am visible when other text is not visible!</p>
 <button type="button" @click="show = !show">Show/Hide</button>
</div>

Here, when you click the button, you see different text on each click alternatively.This is pretty simple — where you see result depending on condition ( basic if-else logic)

Note: v-else matches to most recent v-if.

Some Important Added Concepts —

• What if we have multiple conditions to check? — (if-else-if ?)
  - Vue added v-else-if in 2.10.0+ version. Read more about it here.
• What if you have to show/hide multiple tags/blocks based on a condition?
  - Not worthy to add same condition in all blocks. For this use case, Vue offers template. Put multiple blocks within template and just put condition in template.
• Difference between v-show and v-if ?
  - An element with v-show will always be rendered and remain in the DOM. It just toggles the display CSS property of the element. Whereas in case of v-if element is completely removed from DOM.

You can also check the official documentation of Vue.js which is pretty straightforward.I learnt it from here only.

Feel free to suggest changes and improve the blog.
Do follow if interested in more technology-oriented stuff. Hope you learned something new.

I share updates/knowledge almost daily on twitter. Reach out to me mohitkhare.me

Keep exploring, keep learning!