> For the complete documentation index, see [llms.txt](https://d-ukolov.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://d-ukolov.gitbook.io/vue/basics/svyazyvanie-css-klassov-i-stilei/svyazyvanie-inline-stilei.md).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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