选中复选框后更改样式-Vue

Question

我有一个表单，其中每个星期的每一天都有一些复选框，我想做的就是单击该复选框时，它在背景中变成蓝色，而白色字母变成了

new Vue({
  el: "#app",
  data: {

  },
  methods: {

  }
})

.label-checkbox {
  margin-right: 0.87rem;
  margin-left: auto;
  border: 1px solid #4273DE;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  color: #4273DE;
}

.check-day {
  visibility: hidden;
  position: absolute;
  right: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label class="label-checkbox" for="monday">
    <input type="checkbox" class="check-day" id="monday" value="monday" />
    Mon
  </label>
  <label class="label-checkbox" for="tuesday">
    <input type="checkbox" class="check-day" id="tuesday" value="tuesday" />
    Tues
  </label>
  <label class="label-checkbox" for="wednesday">
    <input type="checkbox" class="check-day" id="wednesday" value="wednesday" />
    Wed
  </label>
  <label class="label-checkbox" for="thursday">
    <input type="checkbox" class="check-day" id="thursday" value="thursday" />
    Thu
  </label>
  <label class="label-checkbox" for="friday">
    <input type="checkbox" class="check-day" id="friday" value="friday" />
    Fri
  </label>
  <label class="label-checkbox" for="saturday">
    <input type="checkbox" class="check-day" id="saturday" value="saturday" />
    Sat
  </label>
  <label class="label-checkbox" for="sunday">
    <input type="checkbox" class="check-day" id="sunday" value="sunday" />
    Sun
  </label>
</div>

选择日期时，我希望它看起来像下图：

请帮助我。

这是jsfiddle：https://jsfiddle.net/bardalesj/q7usmayh/1/

Answer 1

您可以将复选框v-model设置为它们自己的data属性，并使用这些属性来切换类绑定：

new Vue({
  el: "#app",
  data: {
    days: [
      { title: 'Monday' },
      { title: 'Tuesday' },
      { title: 'Wednesday' },
      { title: 'Thursday' },
      { title: 'Friday' },
      { title: 'Saturday' },
      { title: 'Sunday' },
    ]
  },
})

.label-checkbox {
  margin-right: 0.87rem;
  margin-left: auto;
  border: 1px solid #4273DE;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  color: #4273DE;
}

.check-day {
  visibility: hidden;
  position: absolute;
  right: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.checked {
  background: #4273DE;
  color: #fff;
}

.checked::before {
  content: "✔";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label v-for="day in days" :key="day.title" class="label-checkbox" :class="{ 'checked': day.checked }" :for="day.title.toLowerCase()">
    <input type="checkbox" v-model="day.checked" class="check-day" :id="day.title.toLowerCase()" :value="day.title" />
    {{ day.title }}
  </label>
</div>