uniapp 动态绑定单选框

### 实现 UniApp 单选框的动态绑定

在 UniApp 中，`<radio-group>` 组件用于创建一组单选按钮。为了实现单选框的动态绑定，可以利用 `v-model` 或者通过监听 `@change` 事件来更新数据模型。

#### 使用 v-model 进行动态绑定

当使用 `<radio-group>` 和 `<radio>` 标签时，可以通过 `v-model` 将其与 Vue 的响应式数据属性关联起来。这使得所选项能够自动同步到指定的数据变量中[^1]。

<template>
  <view>
    <!-- 动态绑定 radioGroup 值 -->
    <radio-group @change="radioChange">
      <label v-for="(item, index) in items" :key="index">
        <radio :value="item.value">{{ item.label }}</radio>
      </label>
    </radio-group>

    <!-- 显示当前选择项 -->
    <text>您选择了：{{ currentSelection }}</text>
    
    <!-- 提交按钮 -->
    <button class="botBtn" type="primary" @click="submitBtnClick">完成</button>[^2]
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentSelection: '', // 当前选中的值
      items: [
        { label: '选项一', value: 'A' },
        { label: '选项二', value: 'B' },
        { label: '选项三', value: 'C' }
      ]
    };
  },
  methods: {
    radioChange(e) {
      this.currentSelection = e.detail.value;
    },
    submitBtnClick(){
      console.log('提交:',this.currentSelection);
    }
  }
};
</script>

此代码片段展示了如何定义一系列可选项并将其与页面上的显示文本以及控制台日志输出相连接。每当用户改变他们的选择时，都会触发 `radioChange()` 方法，并相应地更新 `currentSelection` 变量的内容。