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

先上效果

主编已回复:

{{item.label}}

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;

width: 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;

width: 25px;

height: 25px;

cursor: pointer;

left: 0px;

outline: none;

-webkit-appearance: none;

}

.on {

background-position: -25px 0;

}