el-radio-group 数据遍历
时间: 2023-11-03 09:20:55 浏览: 100
elementUi vue el-radio 监听选中变化的实例代码
5星 · 资源好评率100%
要遍历 el-radio-group 组件的数据,你需要使用 v-for 指令。首先,你需要准备一个数组,数组中包含了你要展示的选项数据。然后,在 el-radio-group 组件上使用 v-for 指令来循环遍历数组,并将每个选项渲染为 el-radio 组件。
以下是一个示例:
```html
<template>
<el-radio-group v-model="selectedOption">
<el-radio v-for="option in options" :label="option.value" :key="option.id">
{{ option.label }}
</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
selectedOption: '', // 用于绑定选中的值
options: [
{ id: 1, label: '选项1', value: 'option1' },
{ id: 2, label: '选项2', value: 'option2' },
{ id: 3, label: '选项3', value: 'option3' }
]
};
}
};
</script>
```
在上面的示例中,`options` 数组包含了要展示的选项数据。使用 `v-for` 循环遍历该数组,并将每个选项渲染为 `el-radio` 组件。`v-model` 指令绑定了 `selectedOption` 属性,用于记录用户选择的值。
这样,当用户选择一个 radio 选项时,`selectedOption` 的值会自动更新为该选项的 value,你可以通过访问 `selectedOption` 来获取用户选择的值。
阅读全文