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.

Simple templates with computed properties

Simple templates with computed properties - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

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…

Contents