普通html和vue单选框的样式,vue2实现自定义样式radio单选框

先上效果

<div class="reply">

主编已回复:

<div class="radio-box" v-for="(item,index) in radios" :key="item.id">

<span class="radio" :class="{'on':item.isChecked}"></span>

<input v-model="radio" :value="item.value" class="input-radio" :checked='item.isChecked' @click="check(index)" type="radio">{{item.label}}

</div>

</div>

js:

data() {

return {

radio: '1',

radios:[

{

label: '是',

value:'1',

isChecked: true,

},

{

label: '否',

value:'2',

isChecked: false,

},

{

label: '全部',

value:'3',

isChecked: false,

},

]

}

},

methods: {

check(index) {

// 先取消所有选中项

this.radios.forEach((item) => {

item.isChecked = false;

});

//再设置当前点击项选中

this.radio = this.radios[index].value;

// 设置值，以供传递

this.radios[index].isChecked = true;

console.log(this.radio);

}

}

样式：

.radio-box{

display: inline-block;

position: relative;

height: 25px;

line-height: 25px;

margin-right: 5px;

}

.radio {

display: inline-block;

25px;

height: 25px;

vertical-align: middle;

cursor: pointer;

background-image: url(../../../common/images/radio.png);

background-repeat: no-repeat;

background-position: 0 0;

}

.input-radio {

display: inline-block;

position: absolute;

opacity: 0;

25px;

height: 25px;

cursor: pointer;

left: 0px;

outline: none;

-webkit-appearance: none;

}

.on {

background-position: -25px 0;

}