vue 自定义样式radio单选框 样式美化

1、先上图

2、template

<div class="radio-box" v-for="(item,index) in radios" :key="item.id">
    <span class="radio" :class="{'on':item.isChecked}"></span>
    <input  v-model="sex" :value="item.value" class="input-radio" :checked='item.isChecked'  @click="huoqu(index)" type="radio">{{item.label}}
</div>

3、script

data() {
      return {
        sex: '男',
        radios:[
          {
            label: '男',
            value:'男',
            isChecked: false,
          },
          {
            label: '女',
            value:'女',
            isChecked: false,
          }
        ]
  }
},
methods:{
  huoqu(index){
        // 先取消所有选中项
        this.radios.forEach((item) => {
          item.isChecked = false;
        });
        //再设置当前点击项选中
        this.sex = this.radios[index].value;
        // 设置值，以供传递
        this.radios[index].isChecked = true;
      },
}