The object syntax for v-bind:style is pretty straightforward; it looks almost like CSS, except it's a JavaScript object. We are going to use the shorthand that Vue.js provides for the previously used directive, v-bind(:):
<!-- shorthand -->
<div :style="niceStyle"></div>
data: {
niceStyle:
{
color: 'blue',
fontSize: '20px'
}
}
We can also declare the style properties inside an object :style="..." inline:
<div :style="{'color': 'blue', fontSize: '20px'}"></div>
We can even reference variables inside the style object:
<!-- Variable 'niceStyle' is the same we used in the previous example -->
<div :style="{'color': niceStyle.color, fontSize: niceStyle.fontSize}">
</div>
Style object binding
It is often a good idea to use a style object and bind it, so the template is cleaner.