Vue.js

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

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

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

Посмотрите бесплатный видеоурок на Vue School

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

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

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

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

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

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

Если данные будут такими:

data() {
  return {
    isActive: true,
    hasError: false
  }
}
1
2
3
4
5
6

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

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

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

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

<div :class="classObject"></div>
1
data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}
1
2
3
4
5
6
7
8

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

<div :class="classObject"></div>
1
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>
1
data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}
1
2
3
4
5
6

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

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

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

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

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

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

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

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

Эта секция предполагает знакомство с компонентами 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>
1

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

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

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

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

Если у компонента несколько корневых элементов, то потребуется определить какой из них будет получать эти классы. Это реализуется добавлением свойства $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

Подробнее о наследовании атрибутов компонентов можно прочитать в разделе про передачу обычных атрибутов.

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

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

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

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
1
data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}
1
2
3
4
5
6

Рекомендуется привязывать стили к объекту данных, чтобы сделать шаблон чище:

<div :style="styleObject"></div>
1
data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}
1
2
3
4
5
6
7
8

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

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

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

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

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

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

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

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

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

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

← Условная отрисовка →