Vue Dynamic Styles

up:: Vue

Inline styles

Using v-bind and JS Ternary Expressions.

<div :style="{borderColor: boxSelected ? 'red' : '#ccc'}"

Classes

Passes in an object where the key is the CSS class and the value is a boolean on whether it should be applied.

<div :class="{active: boxSelected}" class="demo">

A class that is not bound but normal html always applies.

<div :class="[demo' {active: boxSelected}]">

With an array syntax, you can also add multiple dynamic classes.

If there is more complex class applying code, move it into Vue Computed Properties.