From the course: Vue.js 2 Essential Training
Join today to access over 22,700 courses taught by industry experts or purchase this course individually.
Binding attributes with v-bind
From the course: Vue.js 2 Essential Training
Binding attributes with v-bind
- [Instructor] In Vue.js, you bind attributes using the v-bind directives. So let's take a look at some of the options that we have with that directive. So I've got a data variable here, and I'm referencing it in my Vue object. And we have here three different inventory items, we have a name attribute for each one of them, as well as an image location. So let's go ahead and add those to our template, and we actually-- let's collapse this products. We don't really need to see this JavaScript anymore so I'm going to move it down here. So what I'll do is, I'm going to add an image tag here, and you probably know that we can't use these double curly brace expressions in the source. Instead, what we need to do, is use the v-bind directive. And then you use a colon and you specify the attribute that you want this to modify. So here, if we want to, we can refer to the products. We have three products, so I can refer to the first one using the index zero, and then type in the item that we…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.