在vue中选中或不选中复选框时，如何添加和删除css的class？

Question

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

 <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 class（此处：active），它根据数据绑定到 HTML 元素（带有 v-bind:class）变量（此处：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/vue@2.5.17/dist/vue.js"></script>
<div id="app">

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

在vue中选中或不选中复选框时，如何添加和删除css的class？

How to add and remove class of the css when a check box is checked or not in vue?

jquery

add

vue.js