如何在vue.js中为复选框元素添加/删除类？

Question

在我的Vue.js组件中，我想为任何单击的复选框添加背景颜色：

<div class="langs-container">

    <div class="lang">
        <input type="checkbox"   value="English"   class="mycheckbox" v-model="languages">
        English
    </div>
    <div class="lang">
        <input type="checkbox"   value="French"   class="mycheckbox" v-model="languages">
        French
    </div>

</div>

因此，假设我们要将green添加到每个处于活动状态（勾选）的复选框中，并在未选中时将其删除：

.green {
 background-color: green;
}

实现这一目标的惯用方法是什么？

更新：languages是一个数组，因此默认情况下我无法将English和French定义为false。

Answer 1

给每个复选框一个用于类绑定的v-model。

通过使用input的对象作为v-model来区分这两个复选框：

<input v-model="languages.english"...>

使用类绑定基于：

<div class="lang" :class="{ 'green': languages.english }">

更新：

根据评论中的要求，这里是languages作为数组（而不是对象）的解决方案，它不再是“干净的”：

您需要一个额外的方法来根据选中的值返回true或false。

new Vue({
  el: "#app",
  data() {
    return {
      languages: []
    }
  },
  methods: {
    isChecked(value) {
     return this.languages.includes(value)
    }
  }
})

.green {
 background-color: green;
}

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

    <div class="lang" :class="{ 'green': isChecked('English') }">
      <input type="checkbox" value="English" class="mycheckbox" v-model="languages"> English
    </div>
    <div class="lang" :class="{ 'green': isChecked('French') }">
      <input type="checkbox" value="French" class="mycheckbox" v-model="languages"> French
    </div>

  </div>
</div>