div+css 实现checkbox

// html
<span class="checkbox" @click="isChecked" :class="[checked? 'checked' : '']"></span>

// js
checked = false
isChecked() {
    this.checked = !this.checked
 }

// css
.checkbox
    display inline-block
    position relative
    width 11px
    height 11px
    line-height 11px
    top -2px
    &:before
      content ''
      display inline-block
      position absolute
      left 0
      top 0
      width 11px
      height 11px
      background #fff
      border 1px solid #888
      border-radius 2px
    &:after
      display block
      content ''
      position absolute
      left 2px
      top 3px
      width 7px
      height 3px
      border 2px solid #fff
      border-top 0
      border-right 0
      transform rotate(-50deg)
    &:hover
      &:before
        border-color #666
    &.checked::before
      background-color red
      border-color red
    &.checked::after
      display inline-block