#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Concept: Conditional rendering
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's look at this idea of conditional rendering. Sometimes we want to show part of our page part of our HTML DOM only if something is true.
0:10
So in this case we had a year that was part of the description of each movie. But sometimes the movie didn't have a year.
0:17
And then it was set to zero which you know it's a integer what are you going to do? Set to zero. See what we did is we added this v-if.
0:23
We said if the year is greater than zero then show it. So then we just put the m.year there. And that's great.
0:30
We can put any truthy JavaScript statement into these v-ifs. Sometimes you also want to show something when it's not true. Show the year if we have it.
0:39
Otherwise, say there's no year. So we can use the v-else command. We're using it one time to say no year. But if there's no rating
0:45
we're just not going to show the rating. Alternatively, we could've put a little not rated or something to that effect.
0:50
Pretty straightforward, but really really powerful to define concise, little bits of HTML that tun on and off dynamically
0:57
because they're bound to these objects and kept in sync. So even if you change the year in code it's going to toggle that setting right there.