CSS классы в Vue

В предыдущей статье "Атрибуты тегов в фреймворке Vue" мы пробовали изменить значение атрибута "class" с помощью директивы "v-bind". Был использован только один класс (одно слово), поэтому всё прошло удачно. Но эта тема имеет несколько нюансов. Разберём их.

Добавление одного или нескольких классов

Попробуем модифицировать пример из предыдущей статьи, чтобы добавить сразу несколько классов. К примеру, так всё будет работать правильно:

<div id="application">
   <div v-bind:class="element_class"></div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         element_class: 'class_1 class_2 class_3'
      },
   });
</script>

Три разных класса будут добавлены в атрибут "class" элемента div. Но что если класс надо добавлять по определённому условию? В таком случае необходимо доработать логику приложения. Название класса мы вынесем за пределы Vue объекта:

<div id="application">
   <div v-bind:class="{class_1: classActive}"></div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         classActive: true
      },
   });
</script>

Теперь если свойство classActive имеет значение "true", то класс "class_1" будет показываться в атрибуте. Иначе он будет удалён, и атрибут будет пусты.

Давайте доработаем этот пример, чтобы все три класса "class_1 class_2 class_3" могли отображаться по трём разным условиям. Для этого достаточно будет поставить уже известную конструкцию в атрибуте через запятую, чтобы получилось так:

<div id="application">
   <div v-bind:class="{class_1: active1, class_2: active2, class_3: active3}"></div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         active1: true,
         active2: false,
         active3: true
      },
   });
</script>

Если запусить такой код, то получится элемент с набором атрибутов "class_1 class_3", потому что свойство "active2" стоит в положении "false":

<div id="application">
   <div class="class_1 class_3"></div>
</div>

Если нужно использовать в названии класса тире "-", то их значение внутри директивы необходимо заключать в одинарные кавычки. К примеру: v-bind:class="{'my-class': isActive}". Иначе Vue скажет, что у объекта некорректный ключ.

Атрибуты из объекта

Чтобы не записывать все классы в атрибут вручную, можно обернуть их в ещё один объект внутри data. Перепишем предыдущий пример, создав объект "classes":

<div id="application">
   <div v-bind:class="classes"></div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         classes: {
            class_1: true,
            class_2: false,
            class_3: true
         },
      },
   });
</script>

Такая запись будет работать точно так же, как и при ручном указании всех классов через запятую в атрибуте.