Skip to content
Advertisement

‘-‘ In v-bind:style / Vue.js

I cant understand how to make CSS code into v-bind:style with symbol ‘-‘. If i try to do something like that:

JavaScript

I get:

JavaScript

Advertisement

Answer

As explained in the Docs of Vue: “You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names”

So you’d need to change the margin-left to either marginLeft OR 'margin-left' to get it to work as intended.

Your code would then become:

JavaScript

OR

JavaScript

Hope this helps!
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement