- [Instructor] In this video, we'll take a look
at how we can use dynamic style attributes in view.
Whether we're using view or just writing static HTML.
The use of style attributes
is generally something we should avoid
because it has a tendency to litter our markup
with CSS properties
that would be better off in an external style sheet
but there are exceptions to that rule of thumb.
And also it can sometimes be helpful for quick prototyping.
A classic example for a dynamic style attribute
is wanting to change a numeric value
at a very granular level,
such as a font size or a width
which would be difficult to set up with CSS classes.
Let's see if we can add an option
to dynamically change the font size
on our card manager page.
So first I'm going to wrap this repeating div in another div
where we'll be adding the dynamic style attribute.
And that's just so that I'm not repeating it
over and over again in the card pair div
and also so that it doesn't affect the h1 up here.
So we can set up a dynamic style attribute
using the shorthand for v bind style, colon style.
And one way to set the value is
as a JavaScript object with CSS property names and values.
So we can use the actual property name, font size.
If we put it in quotes, or we could
use camel case font size without the quotes.
Then we can either put a static value in quotes like 15px
or we would make more sense for our purposes
is to build that string using
a data property that we could call font size
and then just add the px to it.
Now let's go ahead and add font size to data
and we'll initialize it to 15.
And the reason we just use the numeric portion
is that makes it a lot easier to change programmatically.
So next, we'll go back up here
and set up some controls for the user.
So I'm going to add a static style attribute
but we'll make it dynamic in a moment.
And I'm just going to add text align center
and cursor pointer so that
the user knows that they can click here.
They won't be able to click on text size,
that's okay for now, but then we'll add a span
that they can click on, which will increment font size.
So just fontsize++ here.
And that text is going to be bigger.
We'll add a vertical bar with another span
and you can probably guess
this is going to decrement font size,
and it's going to set smaller.
So now if I refresh, you can see,
I can click on bigger or smaller
and can make the text way too big or way too small.
In a real app we would probably want to use
a method instead of the inline statement
so that we could add some limits on either end
and some additional logic there.
This next example won't really be dynamic
but just to show you another syntax
I could take these two properties here.
I'll cut those to the clipboard
and I could move them into an object in data
that we'll call text size control style.
And again since text-align is not
a valid JavaScript identifier,
I would want to put quotes around it
or I have the option of changing it to camel case.
But since center is a value,
I do want quotes around that
and pointer and cursor we can leave as this.
So having done that, I can change this style up here
to a dynamic style attribute, colon style,
and for the value, I can just give it
the name of that object.
So if I refresh, I see the same style here.
I have my cursor and everything is aligned in the center.
It's also possible to use an erase syntax here
in case you have multiple objects that you wanted to apply.
So if another style object were defined in data,
I could do that and have both sets
of CSS properties assigned.
In the next video,
we'll take a look at CSS class bindings
which offer a little more flexibility
in terms of being able to conditionally apply them.