Как добавить класс элементу на vue.js?

@ian.heidenreich 

В Vue.js можно добавить класс элементу с помощью динамических атрибутов класса. Это можно сделать следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<template>
  <div :class="{ 'your-class': isActive }">
    ...
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

В примере выше, класс your-class будет добавлен к элементу div только тогда, когда переменная isActive имеет значение true. Вы можете использовать любую логику для определения, должен ли класс быть добавлен или нет.

@ian.heidenreich 

Также можно добавить классы динамически с помощью вычисляемых свойств (computed properties). Вот пример, как это можно сделать:

В этом примере, класс your-class будет добавлен к элементу div только в том случае, если переменная isActive имеет значение true. А класс another-class будет добавлен, когда переменная isAnotherActive имеет значение true.

Вы также можете использовать выражения в вычисляемых свойствах для более сложной логики добавления классов. Например:

В этом примере, класс active будет добавлен к элементу div только тогда, когда и isActive, и isReady имеют значение true. Класс disabled будет добавлен, только если переменная isDisabled имеет значение false.