Работа с CSS классами в фреймворке Vue

Работа с атрибутом class происходит аналогичным образом - через v-bind. Но есть нюансы. Давайте разбираться.

Пусть в свойстве str хранится какой-то класс. Добавим его нашему абзацу:

let app = new Vue({
el: '#app',
data: {
str: 'www',
},
});
<div id="app">
<p v-bind:class="str">Абзац</p>
</div>
Результатом этого кода будет следующий HTML:

<div id="app">
<p class="www">Абзац</p>
</div>
Также может быть такое, что в str хранится несколько классов, тут тоже проблемы с добавлением не будет:

let app = new Vue({
el: '#app',
data: {
str: 'www ggg zzz',
},
});
<div id="app">
<p v-bind:class="str">Абзац</p>
</div>
Результатом этого кода будет следующий HTML:

<div id="app">
<p class="www ggg zzz">Абзац</p>
</div>

Добавление класса по условию
А вот дальше уже начинаются интересные вещи. Давайте сделаем так, чтобы класс, в зависимости от значения какого-либо свойства или добавлялся в элемент, или не добавлялся.

Пусть у нас есть свойство isActive, которое может принимать или true, или false:

let app = new Vue({
el: '#app',
data: {
isActive: true,
},
});
Давайте сделаем так, чтобы если isActive равно true - у нашего абзаца был класс active, а если false - то не был.

Для этого в v-bind:class напишем объект, в котором ключом будет желаемый класс (в нашем случае active), а значением - свойство, в зависимости от которого этот класс будет добавлен нашему абзацу или не будет (в нашем случае это свойство isActive):

<div id="app">
<p v-bind:class="{active: isActive}">Абзац</p>
</div>
Давайте соберем все вместе и запустим:

let app = new Vue({
el: '#app',
data: {
isActive: true,
},
});
<div id="app">
<p v-bind:class="{active: isActive}">Абзац</p>
</div>

Несколько классов
Можно также добавить несколько классов. В этом случае значением v-bind:class должен служить объект с ключами и значениями. Имена желаемых классов должны быть ключами нашего объекта, а соответсвующие значения - свойствами объекта data.

Пусть мы хотим, чтобы у элемента могло быть два класса - active и error. Привяжем к классу active свойство isActive, а к классу error - свойство hasError:

<div id="app">
<p v-bind:class="{active: isActive, error: hasError}">Абзац</p>
</div>
Добавим указанные свойства в объект data:

let app = new Vue({
el: '#app',
data: {
isActive: true,
hasError: true,
},
});
Соберем все вместе и запустим:

let app = new Vue({
el: '#app',
data: {
isActive: true,
hasError: true,
},
});
<div id="app">
<p v-bind:class="{active: isActive, error: hasError}">Абзац</p>
</div>
Классы с дефисом
Пусть теперь мы хотим, чтобы у элемента был не класс error, а класс has-error. Этот класс является некорректным ключом объекта, поэтому его следует брать в кавычки:

<div id="app">
<p v-bind:class="{active: isActive, 'has-error': hasError}">Абзац</p>
</div>
Классы из объекта
Объект с классами не обязательно хранить значением атрибута v-bind:class. Можно хранить набор классов в свойстве объекта data, и в атрибут записать именно это свойство.

Вот пример:

let app = new Vue({
el: '#app',
data: {
classes: {
active: true,
valid: true,
warning: false,
}
},
});
<div id="app">
<p v-bind:class="classes">Абзац</p>
</div>