vue单选框radio选中v-model
时间: 2023-07-04 17:30:16 浏览: 72
在 Vue 中,可以使用 `v-model` 指令来绑定单选框的值,实现单选框的选中事件。具体步骤如下:
1. 在 `input` 标签中设置 `value` 属性为选项的值,例如:
```html
<input type="radio" value="option1" v-model="selected">
<input type="radio" value="option2" v-model="selected">
<input type="radio" value="option3" v-model="selected">
```
2. 在 Vue 实例中定义 `selected` 变量,例如:
```javascript
export default {
data() {
return {
selected: 'option1'
}
}
}
```
这样,当用户选择单选框中的某个选项时,`selected` 变量的值会自动更新为所选选项的值。同时,当 `selected` 变量的值发生变化时,对应的单选框也会被选中。
如果需要在用户选择单选框时触发一些事件,可以在 `selected` 变量的值发生变化时,调用相应的方法。例如:
```javascript
export default {
data() {
return {
selected: 'option1'
}
},
methods: {
handleRadioChange() {
// 在此处处理单选框选中事件
}
},
watch: {
selected(val) {
this.handleRadioChange()
}
}
}
```
这样,当用户选择单选框中的某个选项时,`selected` 变量的值会自动更新,并触发 `watch` 中的监听器,调用 `handleRadioChange` 方法来处理选中事件。