- [Instructor] In this video,
we're going to use our Vue data in another way,
to update HTML attributes with a v-bind.
Specifically, we're going to add a class to the shoe image
so it changes when the selected size changes.
Let's see what that'll look like first.
And we'll right-click this shoe
and choose inspect element.
Scroll this into view.
I'm going to make
my console a little bigger with command, equal sign.
I don't need all this stuff,
so I'll collapse it out of the way.
So what I'm going to do here
is use some classes that I've included in the CSS file
for this project.
If I double-click this class value here in Firefox,
I can edit it.
So I add my other class.
They look like product, hyphen, size,
double hyphen.
Let's put in seven, for size seven.
There we go.
So the shoe gets small.
Double-click this again,
I'll change it up to nine, it gets bigger.
And for half sizes,
I'm substituting an underscore for the dot.
And it gets even a little bigger.
This goes all the way up to our largest size
which is 12 1/2.
And so we need to add this class,
depending on how this value changes.
What we need to use in Vue
is a directive called v-bind.
So back here in my editor for index.HTML,
down here, around line 114.
And I'm not going to need this caption anymore
because we're going to use this information in a different way.
What I need to do is change the value of this class,
based on that size.
V-bind looks like this.
V-bind, colon, attribute name.
So, if I were going to update, say the alt text
based on the current size, it would look like this.
But I'm going to update the class,
so I'll use class.
And then value is going to be
some kind of JavaScript expression.
V-bind can accept any JavaScript expression
that can evaluate into a string.
And class, as well as v-bind style
can also accept arrays and objects.
We're going to use an array here.
And that array is going to contain,
I'm going to use just the simple square braces notation here.
I'm going to take my original class,
and in addition to that,
I'm going to use the selected size.
So again, the structure of that
was product,
size,
then double hyphen.
And now I need to append the value onto this.
And because this is a JavaScript expression,
I can just do this directly in here.
I can catenate on selected size
which is my actual data.
I'll make sure it's a string
so that I can replace
any dots
with underscores.
And I save that.
So again, what we're expecting here is that
every time my selected size changes,
one of the areas that's going to be updated is this class.
This will class always be there.
And then this one is going to update
based on the value of selected size.
Let's try it out.
And we'll refresh the page.
Switch to my Vue devtools.
Scroll this down a little bit.
I can see already that the shoe image
looks a little different with my selected size of nine.
So let's try seven.
We'll go up to 12 1/2.
Works great.
So now we've seen how we can use v-bind
to update the values of HTML attributes using our Vue data.
Using a big old expression like this
in our templates can get a little awkward.
We're going to clean that up next.