Preview
Video Player
00:00
00:00
Conditionally Adding or Removing Classes
6:44In this video, we'll add flair and detail to the accordion menu by using v-bind to conditionally add or remove CSS classes from our Vue template.
We're nearly finished with our accordion
menu, there's just one thing left to do.
0:00
Add up and down arrows that change,
0:05
depending upon whether a menu
item's state is open or closed.
0:06
Looking at our finished example again,
you'll notice that when I open a media
0:12
item, the arrow points up, and when I
close a media item, the arrow points down.
0:15
Also notice on the side here, each item
is color-coded, depending on its type.
0:21
We'll use Vue class findings to
accomplish both of these things.
0:27
First, let's tackle the arrows.
0:31
In our style.css file, we're targeting two
pseudo elements called more and after.
0:32
Don't worry too much about the styles,
just know that the more pseudo class
0:41
adds the down arrow, and
the less pseudo class adds the up arrow.
0:44
If you're used to using
plain JavaScript or JQuery,
0:49
it may be tempting to add more
logic to the toggle details method.
0:52
Maybe each time the list item is clicked,
not only do we hide or
0:57
show the media details, but
we might also add or remove a class
1:00
from the list item based on whether or
not the details are shown or hidden.
1:04
That's one way to do it but with view
we're going to do it slightly differently.
1:08
And while we're here I'm gonna quickly
get rid of these console log statements,
1:12
because we don't need them any more.
1:16
in our view template, we can use
the v-bind directive to bind classes to
1:19
elements based on conditions
that we can specify.
1:23
I'll show you what I mean.
1:26
Recall that we have a property on all
of our media items called show detail.
1:28
And that property is set to either true or
1:32
false each time the user
clicks on the list item.
1:34
So the state of the accordion menu,
whether or not a list item is opened or
1:38
closed, is already being managed and
tracked for
1:42
us, we need only to take advantage of it.
1:45
So first, in our view template I'll add
a v-bind directive to the list item,
1:48
followed by :class.
1:53
Between the quotations,
I'll pass v-bind:class and object.
2:00
And in the object I'll type
less: media.showDetail.
2:05
Less here represents the name of
the class I wanna bind to the list item,
2:13
if media.showDetail is true.
2:17
So if you will look at the state
of media.showDetail, and
2:20
if the value of showDetail
evaluates to true or
2:24
some truthy value, then the class less
will be placed on this list item.
2:27
So let's see this in the browser.
2:32
I'll go ahead and close our example, and
refresh the project that we're working on.
2:34
And then if we inspect this element,
2:39
you can see that the less class is
added and removed as I click on it.
2:43
We're halfway there, now we need the down
arrow to show when the menus are closed.
2:50
Go ahead and pause the video and
see if you can work out what to do next.
2:55
So we can add and remove the more class,
3:01
simply by adding another
condition into this class object.
3:04
So I can say more: Basically
3:08
we are saying here, if media.showDetail
is false, add the more class.
3:15
And now we have functional up and
down arrows.
3:24
Now what about adding a colorful
border to the list item based on type?
3:28
If we look in styles.css again, you'll see
there's a class for book and a class for
3:32
streaming that add these border colors.
3:37
These classes conveniently have
the same name as the type property
3:40
on their corresponding media objects.
3:44
We already have easy access to each item's
type through their type as a property on
3:50
our view instance.
3:54
We just need to use it to
set the correct class.
3:58
You can add multiple classes to a Vue
binding by passing the binding an array.
4:01
I'll surround our current expression
with brackets, to put them in an array.
4:06
This will allow me to add a second
expression into this array,
4:14
that will dynamically add a class.
4:18
So, after the object containing
the first expression,
4:21
I'll add a comma, then media.type.
4:24
Here I'm accessing the type
of each piece of media, and
4:27
setting a class equal to it's type.
4:30
So if the media has a type of book,
it will set a class called book and so on.
4:33
Let's take a look at this in the browser.
4:39
You can see on these elements,
4:47
each media item now has a class
equal to its media type.
4:50
And we're seeing custom border colors.
4:56
You may notice that this is
all working just fine, but
4:59
there are a couple of things about
the solution that could potentially cause
5:02
issues somewhere down the line.
5:05
For example, a type that contains
two words such as streaming video
5:07
is actually setting two classes,
streaming and video.
5:11
And some of the classes are in all caps
because their type is in all caps,
5:15
such as DVD.
5:19
I'll leave it up to you to find
solutions if you want extra practice.
5:21
Finally, we can make this just a bit
shorter with the turn area expression.
5:26
Because I'm evaluate a single expression
here instead of conditionally adding
5:31
two classes, this no longer
needs to be inside of an object.
5:36
And I will say media.showDetail.
5:39
The turn area operator is
just regular JavaScript, so
5:49
I won't go too deep into it.
5:52
But this is basically like saying,
is the value of media.showDetail true?
5:54
If so set the class to less, and
if not set the class to more.
5:59
Let's make sure this still works.
6:05
And fantastic, it does.
6:10
We've covered a lot so far.
6:13
In this part of the course you've
learned the fundamentals of templating,
6:15
data binding, list rendering, conditional
rendering, computer properties, and
6:18
class and style bindings.
6:22
Very well done.
6:24
In the next and
final part of the course, we'll bring
6:25
all this new knowledge together to create
a fun and interactive flashcard app.
6:28
In the process of building the flashcard
app, we'll learn a few more tips and
6:32
tricks such as how to collect and
display user input.
6:36
And a light introduction to creating
transition effects with Vue.
6:40