vue 单选按钮取消选中
时间: 2023-07-04 15:30:51 浏览: 52
在 Vue 中取消单选按钮的选中状态,可以通过以下几种方式实现:
1. 使用 v-model 指令绑定单选按钮选中状态的变量,并将其设置为 null 或者 undefined。
```
<template>
<div>
<label>
<input type="radio" v-model="selected" value="A"> A
</label>
<label>
<input type="radio" v-model="selected" value="B"> B
</label>
<label>
<input type="radio" v-model="selected" value="C"> C
</label>
<button @click="reset">取消选择</button>
</div>
</template>
<script>
export default {
data() {
return {
selected: null
};
},
methods: {
reset() {
this.selected = null;
}
}
};
</script>
```
2. 使用 ref 属性获取单选按钮的 DOM 元素,然后在代码中手动修改其选中状态。
```
<template>
<div>
<label>
<input type="radio" ref="radio1" v-model="selected" value="A"> A
</label>
<label>
<input type="radio" ref="radio2" v-model="selected" value="B"> B
</label>
<label>
<input type="radio" ref="radio3" v-model="selected" value="C"> C
</label>
<button @click="reset">取消选择</button>
</div>
</template>
<script>
export default {
data() {
return {
selected: null
};
},
methods: {
reset() {
this.$refs.radio1.checked = false;
this.$refs.radio2.checked = false;
this.$refs.radio3.checked = false;
this.selected = null;
}
}
};
</script>
```
请注意,以上代码仅为示例,具体实现方式应根据您的具体业务场景进行调整。