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; 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; }