for循环radio-group
时间: 2023-06-29 18:03:35 浏览: 85
你可以使用 Vue.js 中的 v-for 指令来生成一组 radio-group。
首先需要定义一个数组,用来存放 radio 的选项。假设你的选项如下:
```
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
]
```
然后,在模板中使用 v-for 指令来循环生成 radio-group:
```
<template>
<div>
<label v-for="(option, index) in options" :key="index">
<input type="radio" :value="option.value" v-model="selectedOption">
{{ option.label }}
</label>
</div>
</template>
```
上述代码中,v-for 指令会循环 options 数组,生成一组 radio,每个 radio 的值为对应选项的 value 属性,通过 v-model 指令将选中的值绑定到 selectedOption 变量上。
注意,每个 radio 的 label 属性可以设置为选项的 label 值,这样点击 label 也能选中对应的 radio。同时,需要为每个 label 和 input 元素设置唯一的 key 值。
完整的示例代码如下:
```
<template>
<div>
<label v-for="(option, index) in options" :key="index">
<input type="radio" :value="option.value" v-model="selectedOption">
{{ option.label }}
</label>
<p>当前选中的选项是:{{ selectedOption }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
],
selectedOption: ''
}
}
}
</script>
```