Style binding (continued)

Coming back to our header image, we can use thev-binddirective with thestyleargumentto bind a value to thestyleattribute.

index.html:

<p class="header-img" v-bind:style="headerImageStyle"></p>

headerImageStyleis an expression that evaluates to a CSS rule that sets the background image to the correct URL. It sounds very confusing, but when you see it working, it will be quite clear.

Let's now createheaderImageStyleas a data property. When binding to a style attribute, you can use an object where the properties and values are equivalent to the CSS properties and values.

app.js:

data: {
  ...
  headerImageStyle: {
    'background-image': 'url(sample/header.jpg)'
  }
},

Save the code, refresh the page, and the header image will be shown:

Figure 2.6. Page including header image

Inspect the page with your browser Dev Tools and notice how thev-binddirective has evaluated:

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