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

1、先上图

image.png

2、template

    
    {{item.label}}

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