Binding classes with objects and arrays

- [Instructor] In the overview we learned that styles can be controlled with a v-bind directive. But also that Vue let's you use regular classes and the style tag. And that's because, when you're working with Vue, you're just working with regular HTML. In some other frameworks like React, you're actually working in a subset of HTML called JSX, which is a little bit strange sometimes. But, the ability to just work with HTML, and still use Vue.js, it's going to give you a lot of options and that's because you can use variables to refer to class lists or objects, and that's what I'm going to show you in this video. So, we've got this section right here, that let's you control the amount of elements that you see based on the price. And I'm going to improve on that a little bit. I'm going to start by collapsing these elements, so we can just focus on this section right here. So, what I'll do is, I'm going to move this input field in here, this range input field, that custom sort of slider that's right there. And I'm just going to put it inside this form and line. And then I'm going to clean this up by adding myself a little label, that says My Shop here. And then I'm going to modify this inline form here to just use flex classes. So, one of the nice things about using Bootstrap with this framework is that you get a lot of classes that allow you to do layout things. So here, because we have this new title, we don't need the spacing classes like this one, which this says at a margin at the top of five units, which, I think about two REMs. And we no longer need to align this to the right. By using d-flex you'll see that these will all line up right next to each other. That's why we didn't need the form inline anymore. And, in here, what I want to do is use align-items-center. So again, these are Bootstrap classes, and this would be the equivalent of you doing Flexbox and CSS and using align-items-center in there as well. Bootstrap has a lot of classes that just match exactly to what would happen if you were using Flexbox. But it's convenient, because by adding and deleting these classes, we're going to be able to control the layout programmatically. You'll see that later. We have a list of items on this label right here. And I want to show you that you can, in addition to just using regular classes, you can use the v-bind directive to define your classes. So you can say v-bind and then colon, and now this is not going to show anything on the right for a second. But now this is no longer just a class attribute, but it is a programmatic class attribute. So instead of passing along a series of classes like this, we can actually now use array notation. So we can give it these brackets, and we'll need to put these in quotes just like any array, we'll put a comma in between them, and now we have done the same thing, but with a v-bind attribute and array notation. So now, because we know that the shortcut for v-bind is just colon and the class, you can see that we can easily create an array. And if we want to we can even sort of create that array as one of our variables right over here. So if we wanted to say, we could call, just cut this out of here. Let's grab this, we'll cut it, we'll call this thing labelArr. And in data, we'll just add labelArr, and then set it to that array list, and you'll see that we get the same thing. So, why would you want to do that? Well, notice that because we have defined this as an array, we have the full power of JavaScript now available to us. We can see how many elements we have in our classes, we can programmatically modify these and that would have an affect on the layout, which is really really powerful. Now, you can also do this with something like style attributes. So, this input field, let's go ahead and modify that one. And the way that we're doing this right now is we have form-control, and right now, it's taking up 25% of the width of the container. And that's because of this w-25, that's a Bootstrap class. So we'll take that one out. And now, it's going to take way too much of the width and we can modify this with a style attribute, right? You could say style and give it a 60 pixel width. Right, that will make it look like that. And, actually I'm going to add another mx-2 class here. So this means, add a little bit of spacing on the right and the left. That's why it's an x of two units to the right and the left of this element. So it's just going to give you a little bit of breathing room here. And, I'm also going to add a text-align:center here, so this is just regular CSS. Just to center the text inside this input field. So that it looks a little bit nicer. Especially when this is pretty wide now. Think it needs that centering. Let's say that I wanted to... I'm going to put this on the next line, so it's just easier to read. Let's say that I wanted to modify this using the v-bind directive. So what I'll do is just add a colon before the style. Now this is no longer a style tag, it's actually a v-bind style reference. And, instead of passing an array, it wouldn't make sense for this, because we have sort of a name and value pairs. What I can do is pass along an object. And, we use regular JSON notation, but because we're using quotations right here next to this equal sign, we're going to have to use single quotes right there and everywhere else. Because these are all text values here. And so now that should work. And I need to make sure that this is actually a comma, not a semicolon. And you can see that it's working pretty well. And, again, if we wanted to, we can define this as part of our variable down here but we don't really need to. The big thing here is that in addition to using style attributes and class attributes, we can use the v-bind directive on the classes and the styles and pass along arrays and object to give us a full flexibility of modifying our application using JavaScript.