Vue.js v-bind to CSS

If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.

Vue.js uses "v-bind:" to do basic binding to text and HTML, but it also binds DOM elements to dynamic CSS. Here's how:

Here's how to dynamically bind to a CSS class:

<div id="bag" v-bind:class="{classToDynamicallyAdd:booleanVar}">div content</div>
...where "classToDynamicallyAdd" is the name of the CSS class and "booleanVar" will cause the class to be used if the boolean value renders to true. Otherwise the class simply won't get referenced.

Here's how to dynamically bind to a specific CSS style:

<div v-bind:style="{width: widthVar +'%'}">div content</div>
... where "width" is the literal CSS property, "widthVar" is a numeric value and "%" is added on the end of the statement,
yielding: " <div v-bind:style="{width: 80%}">div content</div>.

Link your website to this page! Copy and paste the URL below: