>> One of the most common ways to modify
display on a page is by utilizing classes,
that typically you'll go ahead and turn them on
or add them into a list when you want to set a certain display,
and then remove or turn them off when you want to revert it back.
This method is so common in fact,
that Vue actually gives us a shortcut to be
able to set this up and to manage it.
Let's take a look at how this might work in action.
You're going to notice here that I've got
a CSS file here created with one class called important,
and what it will do is it will bold and italicize our text.
Let's come back over here to our index HTML,
and I want to apply that style to message.
Now I do need to make sure I'm inside of the div element,
so I can't do this on the div element itself,
I need to be inside of it.
Let me just wrap this up at the span tag.
Let's go ahead and for right now we'll say class="important".
If I save this again, live server,
we'll go ahead and update that
into now you're going to notice that
this is set to be dog pictures bold, italicized.
Let's now make this dynamic.
Let's go ahead and set this so that it
will turn on and turn off based on some property.
Now, I could use v-bind like we did before,
and this will work just fine.
But again, because of the fact that this is so common,
we're going to notice that we actually get a shortcut here.
We're able to just simply say :class.
By the way, you can do this with style as
well if you were setting up style directly.
We'll say class equals,
so now this is going to be bound up to some property down here.
let's change this to maybe "messageClasses".
Maybe we would have multiple CSS classes that we want to apply,
and let's inside of our data, add that in.
I'm going to say, let's just scroll down
a little bit "messageClasses".
Let's set this to be a JSON object.
Until you'll notice, I'll be able to say,
"Important: true," to then activate it.
As you might expect,
if I want this to be deactivated,
I could set that to false.
This is a great way to be able to dynamically
change the display on a page based on some value.
if maybe it's invalid and I want to set that to
a different color or I
need to highlight something or whatever it is,
then I can modify those values dynamically.
Then that will in turn update the page.
Let's leave this as hardcoded for
our demo here, bound up "messageClasses".
Let's go ahead and hit "Save".
You'll notice it's still going to be that bold and italics.
Let's go head and set this to false. Hit "Save".
Now you're going notice that bold and
italics then goes away. I can go "True".
Hit, "Save", that now becomes bold and italics.
Then again, if I revert that back to false,
it will then go back to the default.
That's how you can take advantage of
this shortcut class binding inside of you to be
able to very quickly modify and change
the way that an item is going to be
displayed by using CSS classes.
I'm going to want to highlight the
fact that you could actually build
a full style object if you wanted to,
you could use that exact same syntax of colon style and
build out a full style object directly as well.
[MUSIC]