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.
Simple templates with computed properties - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Simple templates with computed properties
- [Instructor] In this video we're going to look at computed properties which can make our templates easier to understand by stripping out code. This product size class that we've written here, isn't the most complex job of script ever written but it is kind of awkward. And if we need to use this more than once, even something this tiny, could be a little problematic to maintain. Like if the css class that powers it were to change, we'd have to change it in more than one place. What we want to do is take this little bit of complexity, out of the template and bring it into our code. So I'm going to copy this expression. Make sure I get the whole thing here. Copy that expression and switch over to app.js. Now you might think this being Java Script that, what I could do is just add a function to the data object. Say call it sizeClass, and then have a function here that calculates whatever it is that I want that sizeClass to be. But that's not going to work in view. The data in our data…
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)
-
-
-