<template>
<span class="radio" :class="{radiocheck: up_methods == 0 }" data-value = "1">
<input type="radio" class="radio_origin" id="set-time-network" value="0" v-model="up_methods">
</span>
<label for="set-time-network">选项一: </label>
<span class="radio" :class="{radiocheck: up_methods == 1 }" data-value = "1">
<input type="radio" class="radio_origin" id="set-time-network" value="0" v-model="up_methods">
</span>
<label for="set-time-network">选项二: </label>
</template>
<script>
data (){
return {
up_methods: 0
}
}
</script>
<style>
.radio ,.radiocheck{
display: inline-block;
position: relative;
cursor: pointer;
width: 15px;
height: 15px;
background: url(../images/radio.png) no-repeat center center;
margin-right: 2px;
vertical-align: middle;
box-sizing: border-box;
}
.radiocheck{
background-image: url(../images/radiocheck.png);
}
.radio_origin{
opacity: 0;
outline: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}
</style>
这样可以实现自定义radio样式,北京图片代替默认样式