Member 14000074 Ответов: 1

Как изменить класс CSS кнопок при нажатии в vue?

При нажатии на кнопку сохраняется начальный класс, а не класс is-active. Есть идеи?

Что я уже пробовал:

<button class="initial" :class="{'is-active': activeTab === 1}" name="button">START</button>


<style>
.is-active {
  color: blue
}

.initial {
color: red;
}
<style>

Richard Deeming

NB: Правила CSS с одинаковой спецификацией применяются в том порядке, в котором они объявлены. С .initial объявленный после .is-active, его свойства переопределяют любые эквивалентные свойства в предыдущем правиле.

Единственное свойство в обоих правилах-это color, таким образом, элемент с примененными обоими классами будет неотличим от элемента только с одним классом. initial класс применен.

1 Ответов

Рейтинг:
2

Mehdi Gholam

Попробовать следующее:

<button :class="activeTab === 1 ? 'is-active':'initial'" name="button">START</button>

Member 14000074

Привет, я получаю следующую ошибку: недопустимое выражение: неожиданный токен === in

{activeTab === 1 ? 'is-active':'initial'}

Сырые выражение: :класс="{activeTab === 1 ? 'это-активный':'начальный'}" от: &ЛТ;кнопки :Класс="{activeTab === 1 ? 'это-активный':'начальный'}" @ "клик" ="setActiveTab" имя="кнопка"&ГТ;начать

Mehdi Gholam

Извините, моя ошибка копирования вставки, я обновил ответ.

Member 14000074

Спасибо, это работает. Есть ли способ иметь несколько кнопок, которые переходят в is-active при нажатии, но только одна кнопка может быть is-active в любой момент времени?

Mehdi Gholam

Ваш вопрос является противоречием, если у вас нет 2 классов "is-active".