【问题标题】：How to change a button class on click in Vue?如何在 Vue 中单击时更改按钮类？
【发布时间】：2019-03-18 14:08:07
【问题描述】：

目前我有这个似乎可以工作的代码：

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

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

【问题讨论】：

标签： javascript css vue.js vuejs2 vue-component

【解决方案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>

【讨论】：

【解决方案2】：

尽管有核心 API，但我不喜欢创建一个使用单个动态类的对象，我创建了这个小库，v-stylish

看看用它来切换一个类是多么简单：

Vue.use(vStylish.default);

new Vue({
 el: '#app',
 data: function() {
  return {
    isActive: false
  };
 },
 methods: {
   toggleState: function() {
     this.isActive = !this.isActive;
   }
 }
});

button.is-active {
  background-color: lightblue;
  border: green solid 2px;
  color: red;
}

<script src="https://unpkg.com/v-stylish@1.0.0/dist/vStylish.umd.js"></script>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <button
    v-class:is-active="isActive"
    @click="toggleState">
    Toggle state
  </button>
</div>

【讨论】：

点击结束后如何将类改回原来的？
该类仅在表达式为真时应用，如果表达式为假则不将该类应用于元素

【解决方案3】：

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

<script>
    export default {
      data () {
        return {
            activeTab: 0
        }
      },
      methods: {
          setActiveTab(){
              let _this = this; //just for context change,
                                //this can be ignored if you make                                   //this function an arrow
                                //or bind the function
              _this.activeTab = 1;
          }
      }
    }
</script>

<style>
    .is-active{
        background-color: red;
    }
    .initial{
        background-color: purple;
    }
</style>

这仅仅是因为，你的初始类总是被设置，并且取代了 is-active 类的样式。在上面的代码中，只有在活动选项卡不是 ==1 时才设置初始类；因此，当满足所需条件时，允许 is-active 类生效。

vue中还有其他实现动态类的方法： vue docs dynamic classes

【讨论】：

【解决方案4】：

这是最短距离。

查看实际操作 - https://codepen.io/stephanieschellin/pen/WaZvPR

HTML

<div id="app">

  <button 
    v-bind:class="{ 'i-am-active': button_active_state }"
    v-on:click="button_active_state = !button_active_state"
    name="button"
  >START</button>

</div>

JS

new Vue({
  el: '#app',
  data: {
    button_active_state: false
  }
});

CSS

.i-am-active {
  color: orange;
}

说明

在 Vuejs 中，如果您的数据变量是使用 true/false 的布尔值，您可以利用 !修饰符在真假之间切换其值。

v-on:click="button_active_state = !button_active_state"

这使您可以避免调用方法来执行条件检查并修改真/假值。切换值所需的一切都被烘焙到 Vue 中。

有关更深入的示例，请参阅 - https://www.tutorialsplane.com/vue-js-toggle-class-click/

【讨论】：