Vue.js – From The Ground Up

Vue.js Tutorial From Scratch – e03 – Conditional Rendering with v-if and v-else

welcome back up next let's tackle conditional rendering conditional and rendering basically means that you have something in your data that determines

whether an item should be displayed or not so it's a very simple concept let me show you how it works let's simply create an h1 and inside of here I will just have some text the way that we

handle conditional rendering in view is using V if so if we said V if and then in here you have a couple of different options at first let's go ahead and say if 1 is less than 0 then go ahead and

render that alright let's go back to the chrome hit refresh and of course it disappears because 1 is not less than 0 obviously if we said 1 is greater than 0 there we go now that renders so you can

have some sort of statement like so but of course most of the time really would be bound to some sort of piece of data so let's say here hidden so if hidden is equal to false let me go

ahead and say just hidden so basically hidden is talking about this piece of data right here so if hidden is equal to false then of course it's gone and then of course if we set

that to true and in that case we do render our text all right so what else can we do with B if well V if has a counterpart which is V else so let's say V if hidden then maybe let's say another

h1 and this time let's say another and then let's use the V else so basically it will try to render this but if it cannot then it will render this one alright so that's a way for us to toggle

some text so obviously we see text and then if we go back here and let's change this back to false and now we get another so we are conditionally rendering one thing over another another

nice thing with V if and V else is of course we can render this inside even a for statement so let's go back to our previous example and maybe have an li and it's V for item in items so this

time we'll actually have an object so let's say item dot txt and then perhaps what we'll do in here is say the following let's say items will have an array of objects and the first

one is going to be text we'll just set that equal to item 1 let's maybe have a checked property and let's say that that one is equal to true alright let's create item 2 let's check that to true

and then finally let's have item 3 and let's set that equal to false all right so now we have a v4 statement and then we have this text so then what we could do is something like so then let's say

let's actually add another div and use V if so V if my item dot checked so if my item is checked in that case maybe let's just say checked and that's it all right so let's check this out in the browser

hit refresh and sure enough we have item 1 is checked item 2 it is checked and item 3 is not checked so this would be a nice way for us to display something like an icon or something like that so

that's it V if V else very useful V directive that we can use in view and again always binding it into one of our data items of course if this data changed at any point then of course view

would rerender so I do want to show you that very quickly before we go again so the simplest way that I can actually do this is maybe just add a button here that will simply toggle checked or not

so let's say at click again we kind of did some of this in the previous episode and let's go ahead and just simply set item checked to the opposite of whatever item checked is essentially we are just

toggling this back and forth alright let's go back to the browser hit refresh whoops looks like I forgot to put a text in there let's say toggle now we should be able to see it there we go

so if I toggle that that's gone toggle that that's gone so we can toggle it again and now everything is checked so how cool is that again this data-driven approach that

view has is just so simple to do things like this right and of course this could be something like your menu like if you wanted a menu to be toggled this is the way that you would do it

hide and show hide and show it's a very common functionality with any modern application so it is nice that we could do this so easily so that's it for this episode go ahead and play with V if and

V else in your project and when you're ready let's move on to the next episode

Conditional rendering refers to toggling the visibility of an item using a true or false statement. Let’s explore how to show or hidden items using v-if and v-else. Finally, let’s recreate our to-do list and toggle the items as checked or not.

For the best experience, follow along in our interactive school at https://www.coderstape.com

Resources
Vue.js Documentation
https://vuejs.org/v2/guide/

Download VSCode
https://code.visualstudio.com/

DigitalOcean Referral
https://m.do.co/c/7dce5364ef4d

Hit us up on Twitter with any questions or comments @codertape (https://twitter.com/CodersTape)

About This Course

Modern applications require a robust Javascript framework. In this series, we are exploring Vue.js from scratch, covering all topics of writing Javascript code that is maintainable, performant and best of all powerful.