jqueryweui關於switch css與js結合

.invoice_wrapper{
  .comm_con{
    .weui-switch-cp{
      .weui-switch-cp__box{
        height:0.4rem;
        margin:0.25rem 0;
        width:0.67rem;
      }
      ::after{
        width:0.35rem;
        height:0.35rem;
        border-radius:50%;
      }
    
    }
    .weui-switch:checked:after, .weui-switch-cp__input:checked ~ .weui-switch-cp__box:after{
        -webkit-transform: translateX(0.25rem);
        transform: translateX(0.25rem);
      }
    .weui-switch:before, .weui-switch-cp__box:before{
      height:0.35rem;
      width:0.63rem;
    }
  }
}

　　

<!--是否需要發票--> <div class="invoice clear"> <div class="weui-cell__bd">發票：</div> <div class="weui-cell__ft"> <label for="switchCP2" class="weui-switch-cp"> <input id="switchCP2" @click="chooseInv()" value="off" class="weui-switch-cp__input" type="checkbox"> <div class="weui-switch-cp__box"></div> </label> <span v-if="!ifinvoice" >不需要</span> <span v-if="ifinvoice">需要</span> </div> </div>

　　

    // 選擇是否需要發票
    chooseInv(){
      console.log('chooseAbc')
      if($('#switchCP2').val()=='off'){
        $('#switchCP2').val('on')
        this.ifinvoice = true;
      }else{
        $('#switchCP2').val('off')
        this.ifinvoice = false;
      }
    },

　　主要是input 的輸入上綁定一個value="off".用點擊事件來控制其值為off或on。然后控制其顏色 和文字