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

@aubree 

В Vue.js для добавления класса элементу можно воспользоваться директивой v-bind:class или сокращённой формой :class.

1. Для использования директивы v-bind:class:

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

Пример:

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

<template>
  <div v-bind:class="{ red: isRed, bold: isBold }">Пример</div>
</template>

<script>
export default {
  data() {
    return {
      isRed: true,
      isBold: false
    }
  }
}
</script>

В этом примере, если значение isRed равно true, класс "red" будет добавлен к элементу. Если значение isBold равно true, класс "bold" будет добавлен к элементу.

1. Для использования сокращённой формы :class:

• В элементе, которому нужно добавить классы, добавляем атрибут :class.
• В значении этого атрибута указываем массив имён классов, которые нужно добавить к элементу. Можно использовать вычисляемые свойства или данные компонента для определения массива классов.

Пример:

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

<template>
  <div :class="[colorClass, { bold: isBold }]">Пример</div>
</template>

<script>
export default {
  data() {
    return {
      colorClass: 'red',
      isBold: true
    }
  }
}
</script>

В этом примере, к элементу будет добавлен класс "red", определённый в переменной colorClass. Если значение isBold равно true, класс "bold" также будет добавлен к элементу.

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