uni-app的单选按钮

在uni-app中，可以使用radio组件来实现单选按钮。你可以通过以下代码示例来创建一个uni-app的单选按钮：

<template>
  <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>
</template>

<script>
export default {
  data() {
    return {
      // 单选框数据
      activeRadio: '', //存的是单选按钮选中的value值
      radioGroup: ['苹果', '香蕉', '梨', '西红柿', '西瓜']
    }
  },
  methods: {
    // 单选按钮发生改变时触发的方法
    chang(e) {
      this.activeRadio = e.detail.value; //选中按钮的value值
      console.log(this.activeRadio);
    }
  }
}
</script>

其中，radio-group是一个单项选择器，内部包含多个radio组件。通过将多个radio包裹在radio-group中，可以实现这些radio的单选功能。radio组件表示单选项目。
需要注意的是，在不同平台下，radio的默认颜色可能不同。例如，微信小程序中为绿色，字节跳动小程序为红色，其他平台为蓝色。如果需要更改颜色，可以使用color属性来调节。此外，如果需要调节radio的大小，可以使用CSS的scale方法进行缩放。请注意，点击一个已经选中的radio不会取消其选中状态。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [uniapp中单选按钮的实现](https://blog.csdn.net/weixin_64103049/article/details/127509480)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]