#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.

Talk Python's Mastodon Michael Kennedy's Mastodon