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