Vue.js – From The Ground Up

Vue.js Tutorial From Scratch – e11 – Class and Style Bindings

[Music] [Applause] [Music] [Applause]

[Music] in this episode let's tackle style bindings and class bindings just as a little bit of setup all I have here is just my view CLI app and all I've done

is just for my body I've increased the font size and lined its center and put a little bit of padding over the top I haven't added anything important just yet so imagine this imagine that we had

this piece of data in our website let's just say it's a value of some sort and I want to conditionally change the background or maybe give it an underline so here's what I'm thinking so let's

create a div and inside of it we'll just put one two three but then imagine that you have some piece of data so let's add our data object here remember it's a function that returns an object and

let's just say error an error is originally going to be set equal to false so if error is true then I want a red background around this one two three so to trigger that back and forth let's

add a button with a maybe type of button and act click remember at click is just an event listener so when it gets click I want to go ahead and set error equal to the opposite of error

effectively all I am doing is flipping error so originally error is gonna be false when we hit this button we're gonna set that equal to true if we hit that button again we're gonna set it

back to false and so on and so forth so what I can do here is we can add a class variable but let's go ahead and bind it right so let's put the semicolon in front that way view knows this is a

class binding style so inside of here we're gonna have an object and the way that it works is that your key to your object is going to be the class name that you want to give it so how about

red error that's going to be my CSS class so let's bind that to error so if this is equal to true then view is going to apply a class of red error now this class doesn't exist yet so let's use the

style block down here to make that happen let's add a new class of red air and then let's go ahead and give this a background color of maybe dark red okay

let's give it a go in the browser I do have my CLI tool running in the background so let's go ahead and take a look at this so when I hit my button the background changes now I don't have any

text for that so let's add a text to my button here and let's say error refresh actually I didn't even need to refresh we have hot reloading so when I click error check that out how cool is that

so we are able to change a piece of data and then have our UI change by the use of classes so what we're doing here is we are applying and removing that red error class this CSS class here so we're

adding a background color of dark red to it so what else can we do with this what if we want it to have maybe two classes how about let's add another one of yellow warning and we'll set that equal

to warning it's a new piece of data that we don't have just yet so let's add it in now so warning will be that and then let's create maybe another button for this and we'll say we're gonna change

warning this time and let's just call this button warning so now that we have this of course we need that yellow warning class so let's add that down here yellow warning and let's give this

not a background color because obviously we have a background color here let's do the underline so text-decoration:underline just something simple that we can see in the browser so

if we hit warning now we have that and we still have our error and we are successfully applying and removing these two classes now obviously the purposes of this demonstration with the buttons

is just to show that we can interactively change this but this could be data that comes from your database or something like that so just keep that in mind these buttons here are just for an

example of something like that but this could also be useful if you had maybe a drop-down menu and when the user clicked on the drop-down menu maybe you wanted to apply a class somewhere else in your

application so a lot of uses for this this is the very basic concept of it so let's take it to the next level so we have this object right here but we can

extract this object and put that as a computed value let's explore that for a second so let's add our computed property so we'll say computed this is going to be equal to let's call it class

object and so class object will be a function and let's go ahead and do what we need to do here and all I'm gonna do here is I'm gonna bring my object from here I'm gonna cut it out and let's go

ahead and return that object instead let me change this alright so now that we have that now we no longer can use error but we have to use this error and then this dot warning and then up here where

we removed that object from we can use that new class object and so now what we've done is we've essentially extracted that into something that can be used in different places so that's

pretty cool functionality wise we have the exact same thing but if for some reason we had this somewhere else in our app and now we have two of them now we're affecting both of them directly

but that's not really why I extracted that to show you let's tweak this example a little bit let's imagine that this object here is maybe a counter of some sort and when you reach a certain

level it needs to turn red and if it's under a certain level then maybe it's just green for it's okay almost like a warning and Eric type of class so let's add another button let's actually add

two buttons this one is going to be a plus sign and this one is going to be a minus sign and let's do the following let's add a new piece of data here before I do this set value equal to one

so this is going to be our initial state for a value so instead of one two three let's go ahead and use value and when I click the plus button I want to increment value so we can just

say value plus plus when I hit the minus sign let's go ahead and decrement value minus minus right nothing crazy here let's go back plus and then minus that's all we're doing we're just increasing

and increasing our value so now what we can do is that instead of just red error if this error but rather we can do if this value is greater than five then go ahead

and maybe do the red error instead all right let's try this let's go ahead and increment and then there it is so the minute our value goes above five that class automatically gets added to our

div up here how cool is that so now we are actually doing it interactively so that's the nice thing with having this in its own separate object not only can you reuse it but you also have the power

of JavaScript at that point to do anything else so let's talk about style binding so this is for a class but there's something similar for style like inline Styles I'm gonna add a new one of

these and now let's go ahead and do the same thing but this time let's do it for our style so let's pass in an object into style and what I want to do is I want to use value whatever value is as

the font size for this but I want to do it inline so check this out let's change the font size now we can't do font size the way that it would be in CSS we have to do a kind of the JavaScript way so

font size capital S and no – we're going to be changing the font size let's change the font size and set that equal to whatever value is so now when we increase value using the plus and minus

we can change the font size of this second div that I've added here now the only thing that we need here right after value is that it needs some sort of units so we can actually add that as

another string here and let's just say pixels so value will be the digit and then we need to add px for pixels all right let's give this a go and see if it works

so let's go back here and let's start to increase it it's kind of hard to see it first but as you see as we are increasing this number this font size is getting bigger to make this a little bit

easier why don't we maybe do times 10 so whatever value is times 10 that way is a little bit easier to see and right away we do see a huge difference here so if i refresh let's go back to one

as we increase you see how the font size is being calculated on the fly pretty cool I like the style binding so this is an easy way to create charts and things like that where visually you want to

reflect whatever the value is giving you pretty cool stuff here now if we wanted to do the the green example let's say green error I know that doesn't really make sense to be an error but let's just

say if it's less than or equal to five then I want to apply green error all right so let's change that here and let's change this to a green maybe just a dark green and let's change our class

name to green error all right let's go back here and sure enough so now it's green but remember once it hits above five now we're red so this could be a way for

us to manipulate the background of this dynamically so with that being said go ahead and play around with this a little bit in your view CLI or view project that you've been working on and when

you're ready let's go ahead and move on to the next episode

Class bindings are a way for us to conditionally add or remove class from a ui element in our DOM. Alternately, you can add some inline styles using the same technique. Let’s explore both of those options in this episode.

For the best experience, follow along in our interactive school at https://www.coderstape.com

Resources
Vue.js Documentation
https://vuejs.org/v2/guide/

Download VSCode
https://code.visualstudio.com/

DigitalOcean Referral
https://m.do.co/c/7dce5364ef4d

Hit us up on Twitter with any questions or comments @codertape (https://twitter.com/CodersTape)

About This Course

Modern applications require a robust Javascript framework. In this series, we are exploring Vue.js from scratch, covering all topics of writing Javascript code that is maintainable, performant and best of all powerful.