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。然后控制其颜色 和文字