- [Instructor] In the same way that you can use
inline styles, view lets you control how classes
are added and deleted,
based on the state of your applications.
To do this, we can use v-bind to bind classes
to different variables.
And this is what it looks like.
You don't need to use the keyword v-bind
that is actually optional,
just like with style and other properties.
And in this case, this would be a pretty simple way
of toggling a class on and on so let's go ahead and show you
we can delete this if we want to.
And then this would be the name of some class
just like with styles, this can be kebab case,
or camel case.
And this particular use of a Boolean right here
would make it very easy to turn this class on and off
depending on the value of a variable.
So this is what we call controlling the application state.
State is really that section in your data part
of the application that has all the variables,
we call that state,
it means the current state of the application
has these variables with certain values.
Now, if you are using classes,
you can either hyphenate them, as I mentioned,
you could say something like font-weight,
but you'd have to quote it, or what I like to do
is just capitalize the second property right here.
And then you can refer to whatever variable you want.
You can also use objects,
you don't need to pass along a single value,
it can be an object with a list of different variables
that you're calling.
So you can add, for example, class-a
based on the value of boolA,
and then also add class-b,
depending on this other variable right here.
This is a sample value here
of how your data might be set up.
Notice that there's also still a normal class right here.
So this is a class that would always get passed,
and then these other classes would get passed
based on the value of boolA and boolB.
So since boolB is false,
you would receive an element that has the, my class on it.
And then you will also get class-a
because boolA happens to be true at the current time.
And then this will change dynamically
based on the value of the variables.
If you're passing along a lot of variables,
it might be more convenient to create a separate object
in your data section,
which is going to make things easier to find and maintain.
A JavaScript doesn't allow hyphens in variable names.
So as you can see, here, again,
you have to quote things or classes
than have a hyphen in them.
And you don't need to use quotes
otherwise, so for classes, like font-weight,
you could just say fontweight.
I always find this sort of an easier thing to do
rather than remembering to put in the quotes.
Now, this is pretty cool.
You can also use computed properties.
And this creates a really powerful pattern
in which the class is based on an object,
but the object itself is a computed property,
and for each one of the classes,
you can have a little bit of logic applied
to whether or not this class shows up, which is pretty cool.
You can also use arrays in your data.
So for example, if you create a few variables
in the data section, you can add them as classes like this,
calling them from the class v-bind parameter,
and then referring to the variables here
and use the classes to call them.
So just another kind of notation.
You can also perform some simple logic in here.
So you can do that directly in the array notation.
Sometimes it's a little bit more convenient to do this
but I like computed properties better,
because they're more maintainable
and I think they're actually quite a lot cooler.
So you can also use objects inside the arrays.
So sort of a combo way of doing these things.
There's a lot of classes and styles.
So if you want to, you can take a look at documentation
for more information.
Now let's continue to work on our project
by looking at a problem and we're going to do here is
take a look at what we have done before.
So this is pretty much the same setup that we've been using,
you've got this plus sign here.
And if you remember, once we get to the value of 100,
then this shopping cart icon turned red.
Right now we're modifying that through an inline style.
So we have this object that we set up
and whenever the value of the cart
ends up being greater than 100,
then we change the background color to red
That happens to be this variable right here.
So we're going to modify that so that we're using classes.
So here's what we need to do.
We're going to modify the cart button to use classes
and use a variable to control those classes.
Plus try a computed property
just so you can see how cool it is.
So here's what the solution is
and you'll see that it works in a similar way.
I keep on adding elements at first
This button will be grey
and then once they get to a certain price,
it's going to go to green
so this is going to be, I think, greater than $100.
and this will become green.
And then when you get past $200, this will become red.
You can take a look at the difference between
those two things right here.
So let's get to it.
I'm going to come over here to this problem
and let's make this a lot bigger.
So what I'll do is I'll start off by
deleting this warning object,
I'm not going to use inline styles anymore.
And I'm also going to create a variable here called salesbtn
to begin with,
and I'll set that
to btn
and then secondary here to begin with.
I'll put a comma.
So now this will become the style that I want to add.
And this should be a colon here so that it works properly.
So now I have this new variable called btn-secondary,
and I'm going to come up here
and modify where this button shows up.
And I'm going to leave btn-success for right now.
And then I will add a class object here
and make it equal to whatever salesbtn is right here.
So at the beginning,
this should have a class of btn-secondary,
let's try adding something
so it's actually going to green to begin with.
And let's remove this btn-success,
so that it doesn't show up as green.
So let's try that now,
you can see that it's grabbing the value of cells btn,
which is right now set to btn-secondary,
which is the grey color.
And so what I need to do next is come down here to
where I modify the value of that color.
And instead of referring to the object
that I created earlier,
I can just refer to this new button variable,
which is called salesbtn.
So I'll say this .salesbtn
and
btn-Success,
let's try that.
So let's modify the cart by adding things
and then once it gets to 100,
it's going to change this to green.
So how would I do this with a computed property,
and how would I make it a little bit more flexible.
So you can do is create a computed property
that would be down here.
So computer property, and I'm going to call it cartbtn here,
right.
And this is going to be pretty cool.
It's going to return an object
and that object is going to be the classes
that it's going to return based on
the value of some variables.
So I can say here, btn-secondary.
And then I can say if this cart total
is less than or equal to 100.
And let's just copy this a couple times.
So this will be btn-success.
If the cart is greater than 100,
and
btn-danger.
If the cart total is greater than 200.
Now we need to modify the application
so that it uses this button
instead of the one we created earlier.
And so what we'll do is
actually just modify this class right here,
so that instead of it tracking sales button,
it's going to track cart btn.
That's our computed property.
And now, when we add past 100, it becomes green.
And if we get past 200, it also becomes red.
And one of the nice things about using these
bootstrap classes that I've been using is that
I didn't have to worry about cleaning up the border
like I did in the previous video.
The difference in classes is going to automatically
sort of create the proper look
for each one of those buttons.
You can see the power of computer properties here.
We can easily do things
depending on the different values of something
in our application.
And that can be really easily passed on to
some sort of dynamic class like we've done right here.