Lawrence_33
@Lawrence_33

Как повесить active class?

Добрый день, подскажите пожалуйста, как правильно повесить active class при клике используя vue js + tailwind css. Я попробовал вариант как оф. сайте но не могу понять как потом с помощью tailwind css добавить стили. Заранее спасибо.
<div :class="{ active: isActive }"></div>
data() {
  return {
    isActive: true,
  }
}
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
@zxf
<div :class="{ ‘pb-2’: isActive }"></div>
data() {
  return {
    isActive: true,
  }
}


Где pb-2 это любой класс из tailwind.

Классы tailwind доступны глобально, поэтому в шаблоне Vue вам надо думать о них, как о видимых классах внутри шаблона.

В итоге все, что Вам остаётся это привязать логическую переменную к названию класса внутри шаблона.

Запись ‘pb-2’: isActive буквально означает: «повесь мне класс pb-2, ЕСЛИ переменная isActive истинная».

Можно делать и более интересные штуки, например:

<div :class="{ ‘pb-${size}’: isActive }"></div>

props: {
    size: {
        type: string,
        default: 4,
    },
data() {
  return {
    isActive: true,
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы