O'Reilly logo

The Majesty of Vue.js by Kostas Maniatis, Alex Kyriakidis

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Style binding

The object syntax

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required