Vue props css class

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

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

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

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

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

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

(opens new window) значения свойства isActive .

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

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

data()  return  isActive: true, hasError: false > > 

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

div class="static active">div> 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

const app = Vue.createApp(>) app.component('my-component',  template: 'p class="foo bar">Приветp>' >) 

Если добавить несколько классов на компонент:

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

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

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> 

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

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

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

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

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

data()  return  activeColor: 'red', fontSize: 30 > > 

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

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

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

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

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

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

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

Если использовать CSS-свойство, которое требует вендорного префикса

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

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

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

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

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

(opens new window)
Последнее обновление страницы: почти 2 года назад

Источник

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

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

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

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

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

div v-bind:class="{ active: isActive }"> div> 

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

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

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

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

data: { 
isActive: true, 
hasError: false
}

div class="static active"> div> 

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

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

div v-bind:class="classObject"> div> 

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

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

div v-bind:class="classObject"> div> 

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

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

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

div v-bind:class="[activeClass, errorClass]"> div> 

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

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

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

div v-bind:class="[isActive ? activeClass : '', errorClass]"> div> 

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

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

div v-bind:class="[{ active: isActive }, errorClass]"> div> 

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

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

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

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

Vue.component('my-component', { 
template: '
Привет
'
})

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

my-component class="baz boo"> my-component> 

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

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

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

my-component v-bind:class="{ active: isActive }"> my-component> 

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

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

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

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

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

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

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

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

div v-bind:style="styleObject"> div> 

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

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

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

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

div v-bind:style="[baseStyles, overridingStyles]"> div> 

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

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

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

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

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

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

Обнаружили ошибку или хотите добавить что-то своё в документацию? Измените эту страницу на GitHub! Опубликовано на Netlify .

Источник