鼠标可选组件

如何解决鼠标可选组件

我想通过鼠标拖动来选择项目。 selectedItems将放置在变量中，以便我可以对其进行修改。对于Fors实例，我有一个{day;类}。

items: [
   {day: monday,class: on},{day: tuesday,{day: wednesday,{day: thursday,{day: friday,],

new Vue({
  el: "#app",data: {
  // selected Items added here
   daysItems: [
   {day: "monday",class: "on"},{day: "tuesday",{day: "wednesday",{day: "thursday",{day: "friday",{day: "saturday",class: "off"},{day: "sunday",selected: []
  },methods: {
  switchclass() {
  this.selected.map(i => {
    i.class = i.class === 'on' ? 'off' : 'on';
  })
  }
  }
})

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 1 calc(50% - 10px); /* explanation below */
  margin: 1px;
  border: 1px solid black;
}
.on {
  background-color: cyan;
}
.off {
   background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="parent">
    <div class='child' :class="item.class"
    v-for="(item,i) in daysItems" :key="i">
      {{item.day}}
    </div>
  </div>
      <div>
        SelectedItems: {{selected}}

    </div>
    <div @click="switchclass">
    Click Me
    </div>
</div>

https://jsfiddle.net/xop4zmv5/2/

我想用鼠标选择所有小时，然后我要打开/关闭“选定小时”属性以更改其颜色。

我该怎么做。我找到了这个示例（https://jsfiddle.net/dacastro4/Lhoww3c2/），但是我不想使用jQuery（嗯，我不知道jQuery）