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

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

1 个答案: