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