uniapp中单选按钮的实现(uniapp单选功能)

uniapp中单选按钮的实现 标签说明：radio-group：单项选择器，内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。radio：单选项目属性说明：

推荐整理分享uniapp中单选按钮的实现(uniapp单选功能)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uniapp单选框radio选中事件,uniapp单选框radio选中事件,uniapp 选择框,uniapp单选功能,uniapp单选按钮点击选中取消,uniapp单选按钮disabled,uniapp单选按钮点击选中取消,uniapp单选按钮点击选中取消,内容如对您有帮助，希望把文章链接给更多的朋友！

@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