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

Question

目前我有这段代码似乎可以工作:

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

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

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>