v-for使用Radio
时间: 2024-08-16 07:06:16 浏览: 25
v-for指令在Vue.js中主要用于循环遍历数组或者其他可迭代的数据源,并渲染出相应的HTML元素。如果你想要在一个列表中使用`v-for`结合Radio按钮(单选框),你可以这样做:
```html
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
<input type="radio"
:value="item.value"
:name="groupName"
v-model="selectedValue">
{{ item.label }}
</li>
</ul>
<p>你选择了: {{ selectedValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ value: 'option1', label: '选项一' },
{ value: 'option2', label: '选项二' },
{ value: 'option3', label: '选项三' }
],
selectedValue: ''
};
},
};
</script>
```
在这个例子中,每个`<li>`标签内的Radio按钮的值(`value`)绑定到`items`数组中的一项的`value`属性,`v-model`用于双向数据绑定,当用户选择一个Radio时,`selectedValue`会更新为所选项的值。