Связывание inline-стилей

Использование объектов

Объектная запись для v-bind:style выглядит почти как CSS, хотя, на самом деле, это объект JavaScript. Для указания свойств CSS можно применять как camelCase, так и kebab-case (не забывайте про кавычки при использовании kebab-case):

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

data: {
  activeColor: 'red',
  fontSize: 30
}

Можно выносить объект стилей из шаблона, чтобы сделать код чище:

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Можно использовать и вычисляемые свойства, возвращающие объекты стилей.

Использование массивов

Запись v-bind:style с массивом позволяет применить несколько объектов стилей к одному и тому же элементу:

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

Автоматические префиксы

При использовании в v-bind:style свойств CSS, требующих указания вендорных префиксов, Vue автоматически определит это и добавит подходящие префиксы к применяемым стилям.

Множественные значения

Начиная с версии 2.3.0+ можно предоставить массив из нескольких (префиксных) значений для свойства style, например:

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

Это приведёт к отображению последнего значения в массиве, поддерживаемого браузером. В этом примере он будет отображать display: flex для браузеров, которые поддерживают flexbox без префиксов.