首页el-radio-group 循环

el-radio-group 循环

时间: 2025-04-21 16:27:56 浏览: 38

### 使用 `el-radio-group` 和 `v-for` 实现循环渲染为了在 `el-radio-group` 中实现循环渲染，可以通过 Vue.js 的 `v-for` 指令遍历一个数组或对象列表，并动态生成多个 `el-radio` 组件。这种方式不仅简化了模板编写过程，还提高了代码的可维护性和灵活性。 #### 示例代码：假设有一个选项列表 `options` 需要被渲染成单选按钮组： ```vue <template> <div>  <el-radio-group v-model="selectedValue">  <el-radio v-for="(option, index) in options" :key="index" :label="option.value" > {{ option.label }} </el-radio> </el-radio-group>  Selected Value: {{ selectedValue }} </div> </template> <script> export default { data() { return { // 单选框的选择项 options: [ { label: 'Option A', value: 'A' }, { label: 'Option B', value: 'B' }, { label: 'Option C', value: 'C' } ], // 当前选中的值，默认为空字符串 selectedValue: '' }; } }; </script> ``` 在这个例子中，`el-radio-group` 被用来包裹所有的 `el-radio` 元素，并且通过 `v-model` 将其与父级组件的数据属性 `selectedValue` 进行双向绑定[^1]。每个 `el-radio` 则利用 `v-for` 来迭代 `options` 数组，从而自动生成相应数量的单选按钮[^2]。此外，`:key` 属性确保每次更新时能够高效地重用 DOM 结构；而 `:label` 设置了每项的具体取值[^3]。当用户点击不同的单选按钮时，`selectedValue` 数据会自动更新，反映最新的选择状态。这得益于 Vue 提供的强大响应机制以及 `v-model` 所带来的便捷操作方式[^5]。

阅读全文