javascript - 如何向 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默认为假。

标签： javascriptvue.js

Answer 1

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

通过使用inputas的对象来区分这两个复选框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/vue@2.5.17/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>