- [Narrator] Lets take a look at some of the superpowers
that we get when we combine JavaScript with CSS and Vue.js
So, I can, for example,
Lets go ahead and collapse this navigane.
And I can create this
instead of just a hard-coded text reference as a variable.
And so, I could put in data,
I can put in a variable here called inputWidth
and set that to 60px,
put a comma there,
and I would have to put this in single quotes,
cause it's a string.
And then, instead of just referring to this text right here,
then I could just refer that to the variable,
and that works just fine.
But, if I wanted to make this into just a number
so that I could control it programmatically
a little bit easier with formulas,
I could just enter inputWidth as a number here,
and then,
just type in the variable name + px,
so simple expressions are going to work over here.
And also, I know that I mentioned that you're using
this sort of modified JSON notation,
so this should be in quotes,
however, technically you can write this
in camelCase and not put the hyphens in here.
And this is normally how you write properties in JavaScript,
this would also work here.
Mean I personally find the quotations and the hyphens
a little bit easier for me to work with,
but you can definitely do this, like this.
In the same way when you're using
Array notation on an element,
you have full use of any JavaScript you want to.
So, right here in label array,
this could refer to another variable,
this could also refer to another array of elements
and so on and so forth.
But that starts getting a little bit messy.
Another thing that you can do that is pretty cool,
is that an element can refer to a computed property.
So, lets take a look at d-flex right here.
Here, our options are to put in the d-flex class,
but if we don't put the d-flex class
it's going to default because of bootstrap to block-lab.
So you see that these things up here,
on top of one another,
which is not optimal.
Lets say that I wanted to either
show this as a flex object,
or just hide that entire sort of slider,
then I can type in here d-none.
But its difficult for me,
to toggle between something that displays
two different classes.
Now the cool thing about this is,
let's take d-none out of here,
is that you can actually combine the class tag.
The cool thing about Vue
is that you can combine the class property in HTML
with the VBIDE class attribute as well.
So this is perfectly fine,
this means that it's going to add this class by default
and then, programmatically, work
with whatever you put in here.
And whatever you put in here
can also be a computed property,
and that's pretty powerful.
So, for example, we can say
this is going to be referencing
something called sliderState,
which we'll program in just a minute.
We haven't done that yet.
So, it's not breaking though.
So right before methods,
I'm going to type it and computed
and this is going to be an object.
And in here,
I'm going to put sliderState.
Now this is going to be a function
that is going to return something
and I'm going to need a variable called sliderStatus,
and this will kind of be like a toggle.
So I'll say silderStatus
and I'm going to initialize it to be true
because I do want these things to be displaying normally.
And what I'll do, is
here, I'll say return sliderStatus.
So if sliderSatus is true and it exists,
then I'm going to have this return d-flex,
otherwise it's going to return d-none.
This is what we called a ternary statement,
so this would be the same thing as me writing,
if this.sliderStatus is true,
then, this.sliderSatus equals d-flex,
otherwise, this.sliderStatus equals d-none.
And you see this a lot in Vue JS
and other modern frameworks.
It's called a ternary statement,
it's just a short way of writing an If-then statement.
And it's really powerful cause as you can see
that I can do this in one line
and, let me show you that if I set the sliderStatus to false
by pulling up the console here,
so I have to refer to that using my app variable.
And type in sliderStatus,
and I'll set it to false.
And you'll see that my slider disappears.
And if I set it to true, it reappears.
So now, I essentially have a toggle
to turn on and off this entire unit rate here
by using a computed property
to modify these available styles
for my little section right here.
Pretty awesome and pretty powerful.
I can imagine that you're probably thinking of
other ways that you can combine JavaScript
with style sheets,
the way that Vue JS works
makes it really easy to do,
and also super powerful.