# Работа с классами и стилями

Часто возникает необходимость динамически изменять CSS-классы и inline-стили элементов в зависимости от состояния приложения. Поскольку и то и другое атрибуты, мы можем использовать v-bind: необходимо лишь вычислить итоговую строку при помощи выражения. Впрочем, заниматься конкатенацией строк неудобно, это может привести к ошибкам. К счастью, Vue предоставляет дополнительные возможности директивы v-bind для работы с class и style. Эти атрибуты кроме строковых значений могут принимать массивы или объекты.

# Связывание CSS-классов

# Объектный синтаксис

Для динамической установки или удаления CSS-классов можно передавать объект в директиву :class (сокращение для v-bind:class):

<div :class="{ active: isActive }"></div>

Запись выше означает, что наличие класса active будет определяться истинностью (opens new window) параметра isActive.

Таким образом можно управлять несколькими классами, добавляя в объект другие поля. Кроме того, :class можно использовать совместно с обычным атрибутом class:

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

1
2
3
4

При использовании таких данных:

data: {
  isActive: true,
  hasError: false
}

1
2
3
4

В результате получится:

<div class="static active"></div>

Список классов элемента обновится при изменении isActive или hasError. Например, если hasError станет true, то значением атрибута class будет "static active text-danger".

Используемый объект необязательно указывать прямо в шаблоне:

<div :class="classObject"></div>

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

1
2
3
4
5
6
7
8

Результат будет таким же. Можно также использовать и вычисляемые свойства, которые возвращают объект — это очень распространённый и мощный приём:

<div :class="classObject"></div>

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Синтаксис с массивом

В :class можно передавать и массив:

<div :class="[activeClass, errorClass]"></div>

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

1
2
3
4
5
6

В результате получим:

<div class="active text-danger"></div>

Для переключения классов в массиве, в зависимости от некоторого условия, можно использовать условный оператор в тернарной форме:

<div :class="[isActive ? activeClass : '', errorClass]"></div>

В этом случае errorClass будет применён к элементу всегда, но activeClass — только в случае истинности isActive.

Однако, такая запись становится слегка громоздкой, особенно если есть несколько классов, задаваемых по условию. Но можно использовать и смешанный синтаксис:

<div :class="[{ active: isActive }, errorClass]"></div>

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

Эта секция предполагает знакомство с компонентами Vue. Вы можете спокойно пропустить её сейчас и вернуться позднее.

При использовании атрибута class на пользовательском компоненте с одним корневым элементом, классы будут добавлены к этому корневому элементу. Собственные классы элемента при этом не будут потеряны.

Возьмём, к примеру, такой компонент:

const app = Vue.createApp({})

app.component('my-component', {
  template: '<p class="foo bar">Привет</p>'
})

1
2
3
4
5

Если указать дополнительные классы на компоненте:

<div id="app">
  <my-component class="baz boo"></my-component>
</div>

1
2
3

В результате отрисовки получим:

<p class="foo bar baz boo">Привет</p>

То же самое справедливо для связывания классов с данными:

<my-component :class="{ active: isActive }"></my-component>

Если isActive истинно, результирующий HTML будет:

<p class="foo bar active">Привет</p>

Если у компонента несколько корневых элементов, то потребуется определить который из них получит эти классы. Это реализуется добавлением свойства $attrs на элемент:

<div id="app">
  <my-component class="baz"></my-component>
</div>

1
2
3

const app = Vue.createApp({})

app.component('my-component', {
  template: `
    <p :class="$attrs.class">Привет!</p>
    <span>Это дочерний компонент</span>
  `
})

1
2
3
4
5
6
7
8

Подробнее о наследовании атрибутов в компонентах можно узнать в разделе Non-Prop Attributes.

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

# Объектный синтаксис

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

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

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

1
2
3
4
5
6

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

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

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

1
2
3
4
5
6
7
8

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

# Синтаксис с массивом

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

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

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

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

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

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

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

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

← Вычисляемые свойства и наблюдатели Условная отрисовка →