From the course: Vue.js 2 for Web Designers
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Using v-bind to update classes - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
(Locked)
Installing Vue on an existing site2m 33s
-
(Locked)
Creating an instance from the mock-up3m 30s
-
(Locked)
Identifying components and data2m 54s
-
(Locked)
Adding data to our component3m 52s
-
(Locked)
Using a model to begin interactivity3m 24s
-
(Locked)
Using v-bind to update classes3m 34s
-
(Locked)
Simple templates with computed properties2m 51s
-
(Locked)
Listen for an event with v-on4m 3s
-
(Locked)
Shorthand notation for faster writing1m 44s
-
(Locked)
Challenge: Activate the color selector1m 9s
-
(Locked)
Solution: Activate the color selector2m 4s
-
(Locked)
-
-
-