<radio-group @change="radioChange"> <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"> <view> <radio :value="item.value" :checked="index === current" /> </view> <view>{{item.name}}</view> </label> </radio-group>

### Vue.js 中 `radio-group` 和 `radio` 组件的实现方法 在 Vue.js 生态中，无论是官方文档还是第三方库（如 Element UI 或 Ant Design Vue），都提供了丰富的组件支持来处理单选逻辑。以下是基于这些框架的具体实现方式。 #### 使用原生 Vue.js 实现 Radio Group 通过绑定数据模型到一组 `<input type="radio">` 元素上，可以轻松实现单选项功能： ```html <template> <div> <h3>请选择您的性别</h3> <label> <input type="radio" value="male" v-model="gender"> Male </label> <label> <input type="radio" value="female" v-model="gender"> Female </label> <p>您选择了: {{ gender }}</p> </div> </template> <script> export default { data() { return { gender: '' // 初始值为空字符串 }; } }; </script> ``` 此代码展示了如何利用双向绑定 (`v-model`) 来动态更新所选值[^1]。 --- #### 基于 Element UI 的 `el-radio-group` 和 `el-radio` 组件 Element UI 提供了一套简洁易用的 API 来构建更复杂的界面交互。以下是一个简单的例子： ```vue <template> <div> <h3>选择颜色偏好：</h3> <el-radio-group v-model="colorPreference"> <el-radio label="red">红色</el-radio> <el-radio label="blue">蓝色</el-radio> <el-radio label="green">绿色</el-radio> </el-radio-group> <p>当前选择的颜色是：{{ colorPreference }}</p> </div> </template> <script> export default { data() { return { colorPreference: 'red' // 默认值设置为 "red" }; } }; </script> ``` 在这个示例中，`el-radio-group` 是父容器，而多个子级 `el-radio` 表示不同的可选项。当用户点击某个单选按钮时，其对应的标签会被赋给 `v-model` 所绑定的数据属性[^3]。 如果需要动态渲染选项列表，则可以通过数组配合 `v-for` 指令完成： ```vue <template> <div> <h3>选择水果：</h3> <el-radio-group v-model="selectedFruit"> <el-radio v-for="fruit in fruitsList" :key="fruit.value" :label="fruit.value">{{ fruit.text }}</el-radio> </el-radio-group> <p>已选水果：{{ selectedFruit }}</p> </div> </template> <script> export default { data() { return { selectedFruit: '', // 当前选定项 fruitsList: [ { text: '苹果', value: 'apple' }, { text: '香蕉', value: 'banana' }, { text: '橙子', value: 'orange' } ] }; } }; </script> ``` 这里定义了一个名为 `fruitsList` 的数组用于存储可能的选择项，并借助 `v-for` 动态生成 HTML 结构[^4]。 --- #### 基于 Ant Design Vue 的 `a-radio-group` 和 `a-radio` 组件 Ant Design Vue 同样提供类似的解决方案，语法稍作调整即可适配该框架风格： ```vue <template> <div> <h3>选择支付方式：</h3> <a-radio-group v-model="paymentMethod"> <a-radio value="credit-card">信用卡</a-radio> <a-radio value="paypal">PayPal</a-radio> <a-radio value="bank-transfer">银行转账</a-radio> </a-radio-group> <p>当前付款方式：{{ paymentMethod }}</p> </div> </template> <script> export default { data() { return { paymentMethod: 'credit-card' }; } }; </script> ``` 上述片段演示了如何结合 Ant Design Vue 创建一个基本的单选组控件[^2]。 对于更加复杂的应用场景——比如两个独立却相互影响的单选框集合——也可以扩展思路加以解决。例如监听其中一个输入变化事件并同步修改另一个关联字段的状态等操作均属可行方案之一[^2]。 --- ###