From the course: Vue.js 2 for Web Designers

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Using v-bind to update classes

Using v-bind to update classes - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

Using v-bind to update classes

- [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…

Contents