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

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

Привязка CSS-классов ​

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

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

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

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

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

const isActive = ref(true)
const hasError = ref(false)

data() {
  return {
    isActive: true,
    hasError: false
  }
}

А шаблон таким:

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

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

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

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

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

const classObject = reactive({
  active: true,
  'text-danger': false
})

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

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

Это будет отрендерено, как:

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

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

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

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

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

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

Можно передать массив в :class, чтобы применить список классов:

const activeClass = ref('active')
const errorClass = ref('text-danger')

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

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

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

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

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

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

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

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

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

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

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

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

Например, если возьмём компонент MyComponent со следующим шаблоном:

<!-- шаблон дочернего компонента -->
<p class="foo bar">Привет</p>

Затем добавим на него несколько классов:

<!-- при использовании компонента -->
<MyComponent class="baz boo" />

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

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

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

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

Если isActive истинно, то итоговый HTML будет таким:

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

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

<!-- шаблон MyComponent с использованием $attrs -->
<p :class="$attrs.class">Привет</p>
<span>Это дочерний компонент</span>

<MyComponent class="baz" />

В результате:

<p class="baz">Привет</p>
<span>Это дочерний компонент</span>

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

Привязка инлайн-стилей ​

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

Объектный синтаксис для :style выглядит почти как для CSS, за исключением того, что это объект JavaScript и соответствует свойству style элемента HTML:

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

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

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

Хотя рекомендуется использовать ключи в camelCase, :style также поддерживает ключи CSS-свойств в kebab-case (соответствует тому, как они используются в реальном CSS) — например:

<div :style="{ 'font-size': fontSize + 'px' }"></div>

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

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

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

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

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

:style директивы могут сосуществовать с обычными атрибутами стиля, как и :class.

Шаблон:

<h1 style="color: red" :style="'font-size: 1em'">hello</h1>

Рендер:

<h1 style="color: red; font-size: 1em;">hello</h1>

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

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

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

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

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

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

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

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

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