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

Пользователь

от aubree , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от felix , год назад

@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" также будет добавлен к элементу.


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