Как заменить один класс стиля на другой в vue.js?

Question

[kroha3000]

Начал осваивать vue.js.

Глаз замылился и объективно, логично рассуждать и изучать уже не могу. Может просто не доходит.

Не могу сделать замену класса при клике. Добавлять класс добавляет. Заменить не могу. Ну или удалить, после добавления.

Документацию в доль и поперёк перечитал, видимо уже загнал себя. а задачу решить не могу. Подскажите как удалить или изменить класс стиля при клике на линк/кнопку.

p.s. понимаю что вопрос крайне простой. Но не могу допереть

Answer 1

[Andrej Sharapov]

<div id="app">
  <div :class="{ active }"></div>
  <button @click="active = !active">Toggle Active</button>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      active: false,
    }
  }
})

Comments

[kroha3000]

Спасибо огромное добрый человек. Эх, всё элементарно просто.

[Andrej Sharapov]

kroha3000, это нормально. Я тоже совсем недавно начал изучать vue и сталкивался с такими же проблемами =)
Удачи в изучении!

[Ярослав Иванов]

Andrej Sharapov, в курсе что это такое { active } ?

[kroha3000]

Конечно. всё сделал уже. Просто уже видимо меня сегодня переклинило от хождения вокруг да около. Что Вы написали, я чуток под свою ситуацию подкорректировал. Всё заработало.