v-model可以绑定单选框控件吗
时间: 2023-07-07 18:45:50 浏览: 44
可以,但是需要注意一些细节。
在单选框中,只有选中的单选框控件才会提交表单数据,因此我们需要将 `v-model` 绑定到每个单选框控件上,而不是绑定到单选框组的父元素上。
下面是一个使用 `v-model` 绑定单选框控件的示例:
```html
<template>
<div>
<label>
<input type="radio" value="apple" v-model="selectedFruit">
Apple
</label>
<label>
<input type="radio" value="orange" v-model="selectedFruit">
Orange
</label>
<label>
<input type="radio" value="banana" v-model="selectedFruit">
Banana
</label>
<p>You selected: {{ selectedFruit }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedFruit: 'apple'
}
}
}
</script>
```
在上面的示例中,我们将 `v-model` 绑定到每个单选框控件上,并且在 `data` 中定义了一个 `selectedFruit` 属性来存储选中的水果。当用户选择一个水果时,`selectedFruit` 属性的值将被更新,并且用户选择的水果名称会显示在页面上。
需要注意的是,我们必须将每个单选框控件的 `value` 属性设置为不同的值,以便 `v-model` 可以正确地跟踪用户的选择。