uniapp书写单选框

在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>

在上述代码中，我们使用了`radio-group`组件来包裹一组`radio`单选按钮。通过遍历`radioGroup`数组，我们生成了多个单选按钮，并将每个按钮的值绑定到`item`。当单选按钮的选中状态发生改变时，`@change`事件会触发`chang`方法，我们可以在该方法中获取选中的按钮的值并对其进行处理。例如，将选中的值存储到`activeRadio`变量中，并进行后续操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [uni-app中使用选择框图片来写单选，多选，以及不可选择](https://blog.csdn.net/lll19960406/article/details/125770547)[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_1"}}] [.reference_item style="max-width: 50%"]
- *2* [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_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]