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

新手上路,请多包涵

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

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

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

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

阅读 200
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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题