Style binding

To set a background image, we must provide the URL as a property in a CSS rule like this:

.header .header-img {
  background-image: url(...);
}

Obviously, our header image should be specific to each inpidual listing, so we don't want to hard code this CSS rule. Instead, we can have Vue bind the URL from data to our template.

Vue can't access our CSS style sheet, but it can bind to an inlinestyleattribute:

<p class="header-img" style="background-image: url(...);"></p>

You may think using a text interpolation is the solution here, for example:

<p class="header-img" style="background-image: {{ headerUrl }}"></p>

But this is not valid Vue.js syntax. This is, instead, a job for another Vue.js feature called adirective. Let's explore directives first and then come back to solving this problem.