标签说明：

radio-group：单项选择器    
    
    
    ，内部由多个 <radio> 组成    
    
    
    。通过把多个radio包裹在一个radio-group下 


     


     


     


，实现这些radio的单选 


     


     


     


。

radio：单选项目

属性说明：

@change：<radio-group> 标签中的radio选中项发生变化时触发 change 事件

 




 




 




，event.detail = {value: 选中项radio的value}

value：<radio> 标识

 




 




 




。当该 <radio> 选中时   

   

   

   ，<radio-group> 的 change 事件会携带 <radio> 的 value

checked：当前是否选中  

     

     

     

，默认值false


  




  




  




，类型是布尔值

disabled：是否禁用  


  


  


  ，默认值是false   
     
     
     
，类型是布尔值

color：radio的颜色



   




   




   




，同css的color

注意

radio的默认颜色 



 



 



 ，在不同平台不一样   

   

   

   。微信小程序是绿色的                   ，字节跳动小程序为红色




    




    




    




，其他平台是蓝色的  

     

     

     

。更改颜色使用color属性


  




  




  




。 如需调节radio大小














，可通过css的scale方法调节                    ，如缩小到70%style="transform:scale(0.7)" radio不是checkbox



     



     



     



，点击一个已经选中的radio















，不会将其取消选中

上代码：

<!-- uniapp单选框 --> <view class=""> <radio-group @change="chang"> <label v-for="item in radioGroup" :key="item"> <radio :value="item" :checked="item==activeRadio" />{{item}} </label> </radio-group> </view> <script> export default { data() { return { // 单选框数据 activeRadio: , //存的是单选按钮选中的value值 radioGroup: [苹果, 香蕉, 梨, 西红柿, 西瓜] } }, methods: { // 单选按钮发生改变时触发的方法 chang(e) { this.activeRadio = e.detail.value; //选中按钮的value值 console.log(this.activeRadio); } } </script>

打印结果：

1.获取选中按钮的value值    
    
    
    ，e.detail.value 


     


     


     


，赋值给data中activeRadio声明的变量

2.打印选中按钮的值

实际场景案例

 




 




 




，男女单选框

<radio-group @change="radioChange" class="value checked" style="font-size: 13px;"> <label class="radio"> <radio style="zoom: 0.8;" :color="roleColor" value="1" :checked="sex == 1" />男 </label> <label class="radio" style="margin-left: 15%;"> <radio style="zoom: 0.8;" :color="roleColor" value="2" :checked="sex == 2" />女 </label> </radio-group> <script> export default { data() { return { // 单选框数据 sex: "", //存的是单选按钮选中的value值,性别值 } }, methods: { radioChange(evt) { // console.log(evt); this.sex = evt.detail.value; }, } </script>

效果图：