如何在 Vue 中单击时更改按钮类？

Question

目前我有这段代码似乎有效：

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

但是，当我单击该按钮时，它不会应用 is-active 类，并保持初始类中的样式。有人能帮忙吗？

原文由 Billy Brown 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我提供了一个像你这样的例子，它工作正常，我认为属性 activeTab 是一个字符串，当你尝试使用返回 false 的严格相等时

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

检查这个：

 Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    activeTab: 0
  },

});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />

<div id="app" class="container">

  <button   class="btn" :class="{'btn-primary':activeTab===1}" @click="activeTab=1">START</button>

</div>

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议