如何在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>

Answer 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>

Answer 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

Answer 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的布尔值，则可以利用！修饰符可在true和false之间切换其值。

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

这样可以避免调用方法执行条件检查和修改true / false值。切换值所需的所有内容都放入Vue中。

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