javascript - vue.js怎么实现单击时添加class双击时取消class？

Question

要实现双击取消class 单击添加class
想问下我这个标签拿button 好实现还是input为checkbox 好实现？

Answer 1

已经实现了

cancel(e) {
      let element = e.currentTarget;
      if (element.classList.contains('active')) {
        element.classList.toggle('active');
      }
    },
    toggle(e) {
      let element = e.currentTarget;
      if (!element.classList.contains('active')) {
        element.classList.toggle('active');
      }
    }

html代码

<button v-for = "item in months16"
                      @dblclick.prevent="cancel($event)"
                      @click.prevent="toggle($event)"
              >{{item}}</button>

Answer 2

dblclick(双击事件)触发的时候一定会先触发click(单击事件)的，在这里无论是用button还是用input都会有这个问题：在双击取消class时会先执行添加一次class。