Связывание CSS-классов
Vue предоставляет удобные инструменты для работы с class и style
v-bind:class и v-bind:style кроме строковых значений могут принимать массивы или объекты.
Для динамической установки или удаления CSS-классов можно передавать объект в директиву v-bind:class
Запись выше означает, что наличие класса active будет определяться истинностью параметра isActive.
Таким образом можно управлять несколькими классами, добавляя в объект другие поля. Кроме того, v-bind:class можно использовать совместно с обычным атрибутом class:
При использовании таких данных:
В результате получится:
Используемый объект необязательно указывать прямо в шаблоне, можно вынести в data
Результат будет таким же. Можно также использовать и вычисляемые свойства, которые возвращают объект — это очень распространённый и мощный приём:
Короткий синтаксис
Используйте короткий синтаксис :class="classObject" и :style="classObject"
Использование массивов
Для классов и стилей можно использовать массивы
В v-bind:class можно передать и массив:
В результате получим:
Для переключения классов в массиве, в зависимости от некоторого условия, можно использовать условный оператор в тернарной форме:
Однако, такая запись становится слегка громоздкой, особенно если есть несколько классов, задаваемых по условию. Но можно использовать и смешанный синтаксис:
Использование с компонентами
Мы рассмотрим подробнее эту тему при разборе компонентов
При использовании атрибута class на пользовательском компоненте, классы будут добавлены к его корневому элементу. Собственные классы элемента при этом не будут потеряны.
Если указать дополнительные классы на компоненте:
В результате отрисовки получим:
То же самое справедливо для связывания классов с данными:
Если isActive истинно, результирующий HTML будет:
Связывание inline-стилей
Все эти правила работают и для inline стилей
Объектная запись для v-bind:style выглядит почти как CSS, хотя, на самом деле, это объект JavaScript. Для указания свойств CSS можно применять как camelCase, так и kebab-case (не забывайте про кавычки при использовании kebab-case):
Можно выносить объект стилей из шаблона, чтобы сделать код чище:
Можно использовать и вычисляемые свойства, возвращающие объекты стилей.
Запись v-bind:style с массивом позволяет применить несколько объектов стилей к одному и тому же элементу:
При использовании в v-bind:style свойств CSS, требующих указания вендорных префиксов, Vue автоматически определит это и добавит подходящие префиксы к применяемым стилям.
Начиная с версии 2.3.0+ можно предоставить массив из нескольких (префиксных) значений для свойства style, например:
Это приведёт к отображению последнего значения в массиве, поддерживаемого браузером. В этом примере он будет отображать display: flex для браузеров, которые поддерживают flexbox без префиксов.