Замена класса на новый с помощью vue.js?

Question

[HamSter]

Есть такой код:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  
  
<div id="wrap">
  <header id="navigation-top">
    <nav class="main-navigation">
      <!-- this is the button that toggles the class "active" -->
      <button v-on:click="isActive = !isActive" class="navigation-hamburger">
        +
      </button>
    </nav>
  </header>

  <!-- this is the div that needs to get the class "active" when the button is clicked -->
  <div class="menu-contain" v-bind:class="{ newClass: isActive}">
    <ul>
      <li><a href="#" class="links">Home</a></li>
      <li><a href="#" class="links">About</a></li>
      <li><a href="#" class="links">Contact</a></li>
    </ul>
  </div>
</div>

vue.js:

new Vue({
  el: '#wrap',
  data: {
    isActive: false
  }
});

jsbin

Вопрос: Есть ли возможность в vue.js не добавлять класс, а заменять?! Т.е. класс menu-contain заменить наnewClass?

Answer 1

[0xD34F]

<div :class="isActive ? 'newClass' : 'menu-contain'">

Comments

[HamSter]

Спасибо!

Answer 2

[tester_toster]

Замените строку класса на переменную, и либо переопределяйте ее при надобности, либо наследуйте сам класс приложения/компонента
https://ru.vuejs.org/v2/api/#extends
vue-js.org/class-and-style-bindings