如何在vue中选中复选框时添加和删除css的类？

Question

假设我想要添加一个复选框，并在选中或取消选中复选框时删除css样式类。以下是我使用的代码： -

 <template>
   <div class="app">
     <label><input type="checkbox" @click= "onchange($event)">add/remove class</label>
   </div>
</template>

 <script>
   export default {
     methods:{
       onchange($event){
         console.log($event)
       }
    }
  }
 </script>

我将如何完成我的任务，我已经在选中时更改了我的背景颜色，并在我再次取消选中该复选框时更改颜色。

Answer 1

创建一个CSS类（这里：active），它根据数据变量（这里：v-bind:class）绑定到HTML元素（使用isActive）。

new Vue({
  el: "#app",
  data: {
    isActive: false
  },
  methods: {
  	changeColor() {
      this.isActive = !this.isActive
    }
  }
})

.active {
  background-color: rgba(100,100,100,0.4);
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">

  <label v-bind:class="[{ 'active': isActive }]">
    <input type="checkbox" @click="changeColor()">
    add/remove class
  </label>
  
</div>