#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Conditional rendering
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now there's one thing you may have noticed it's not super great and we saw it when we looked here. Not all of these have a rating or a year set
0:10
however, when we render it you can see this was published in that year and that one I guess has a score
0:17
but also a no rating but the ratings showing up there are like kind of in that bit as just an empty space.
0:22
How do we deal with that? Well we can use conditional rendering in view in our HTML. So let's go back here
0:27
so maybe I want to only show this if the year is greater than zero. So we say v and we look and see what's in here.
0:34
Is there a v-if, I can look or something to do with if statements or conditionals, yes there is and then we can just put a JavaScript statement
0:41
like so v-if="m.year > 0" and notice it automatically finds that value that's pretty awesome. Now, let's do the same thing for rating
0:50
and we can just use the truthiness of strings so we'll say just m.rating like so. Now let's try and just refresh this.
0:58
Look at that. The rating and the year went away because we don't have that information but when we do, there's the year, there's the rating.
1:04
Cool, right? Super, super easy so we have these conditionals and we could also put something like this we could say v-else just like so, say no year
1:14
so there we have no year for the first one and all that. Now, I'm not sure that looks great. I'm not sure that's what I want to put there
1:19
but it does show you that we can have these conditional statements and we can even have fallback other statements right.
1:25
If you don't want to show the year what do you want to show them? So pretty cool the way that we can use that
1:29
for conditional rendering and totally straightforward.