Работа с 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>

Дан абзац. Дано свойство cssClasses, в котором записаны некоторые CSS классы. Добавьте эти классы к нашему абзацу.

Добавление класса по условию

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

Пусть у нас есть свойство 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>

Дан абзац. Дано свойство isValid. Если это свойство имеет значение true - добавьте абзацу класс valid.

Дан абзац. Дано свойство isValid и свойство isDone. Если свойство isValid имеет значение true - добавьте абзацу класс valid. Если свойство isDone имеет значение true - добавьте абзацу класс task-done.

Модифицируйте предыдущую задачу. Пусть isDone изначальное имеет значение false. Сделайте кнопку, по нажатию на которую isDone поменяется на true тем самым добавив абзацу класс task-done.

Несколько классов

Можно также добавить несколько классов. В этом случае значением 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>

Практика

Дан абзац. Дано свойство isValid. Если это свойство имеет значение true - добавьте абзацу класс valid, а если true - то класс valid.