Binding Inline Styles in Vue

Binding and manipulating class and style attributes of an element is a common need, so Vue provides enhancements to using v-bind with those attributes to avoid having to generate them with string concatenations.

Binding Inline Styles

Binding to Objects

:style attribute can bind js object values corresponding to an HTML element style property

const activeColor = ref('red')
const fontSize = ref(30)

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Both camelCase (recommended) and kebab-case css property keys are supported

Binding a style object directly is often the cleaner solution, and often used together with computed properties (similar to Binding html Classes in Vue)

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})

<div :style="styleObject"></div>

Binding to Arrays

:style can be bound to an array of multiple style objects, which will be merged and applied to the same element

<div :style="[baseStyles, overridingStyles]"></div>

Auto Prefixing

When using a CSS property requiring a Vendor Prefix vue will add it automatically

Multiple Values

Multiple prefixed values can be provided to a style property, which will render the last value supported by the browser

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

This will render display:flex for browsers supporting the version of flexbox without prefix

My Mind🪴

Explorer

Binding Inline Styles in Vue