#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Setting attributes with Vue.js

Login or purchase this course to watch this video and the rest of the course contents.
0:00 I want to round this whole app out by just one more thing with these genres. So we saw that we can click here
0:06 and that works really well and I can click even here and see it's history but I'd like to know that if I'm down here
0:13 the reason this is in the list is because history was the thing I actually selected. I'm in genre, not just happened to be something
0:21 in a search result or something like that. So what we can do is I can come over here and already have a CSS style for that.
0:28 So we could come down here and say "You know what, this is going to be danger." Right, that's bootstrap. And that makes them red.
0:34 And if it's not red, it makes them blue. But what I want to do is I want to toggle between this info one and the danger one
0:43 based on whether or not the selected genre is this. And it turns out to be super easy to do. So we already have a class setting up here.
0:50 And let's take this out. I'm going to put it down here. So what I can do is say, :class : to set an attribute.
0:57 So I could set like the H or F for other types of things. And what I want to do is I can put a list of classes I want to be applied
1:06 and those can be evaluated in JavaScript. So I'll say G triple equals selected genre. There it was, like that. If that's true, I'll do a if thing here.
1:19 If it's true it's selected it's going to be something other than that. It's going to be danger. And if it's not selected it's going to be info.
1:26 And will not replace but will append onto what we have here. Ready? Let's go see. If I go click on action, oh sweet.
1:35 Thriller, there's all the thrillers. There's drama, crime. Let's go find something that's different. How about sci-fi? Bam, sci-fi.
1:44 And if I search for something, if I just get the top 10 or if I search for cats, boom nothing selected. How cool is that?
1:53 This app is built 100% with no backend other than external APIs, right? This movie service that we're reaching out to
2:01 but it's not really part of this app and it's running just HTML off my file system, right? We could de-bug it over here in WebStorm
2:08 and get a little more help but beautiful, beautiful fully client side JavaScript app. And look at how much HTML is here, right?
2:19 With all the design and all that stuff, not so much. I mean, 67 lines, similarly here 60-so some lines of JavaScript as well.
2:28 And the whole app is basically these two plus external dependencies and styles.


Talk Python's Mastodon Michael Kennedy's Mastodon