Binding to Style attribute in Vue.js

Object Syntax

v-bind:style

You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names

Now, change the font size of the following DIV element.

<div id="root">
<div v-bind:style="font_size">Binding Style Example 1</div>
</div>

This is the Vue instance and you have the font_size data object.

data: {
        font_size: '20px'
}
   

We will see another style binding example where you can create a data object and assign it to the style attribute.

You can see the following output for above two cases