vue中点击单选框时,如果为打开按钮,单选框不能被选中
时间: 2023-10-10 11:08:39 浏览: 137
你可以使用`v-model`来绑定单选框的值,并在点击事件中判断是否为打开按钮,如果是,则取消选中。
例如:
```html
<template>
<div>
<input type="radio" id="radio1" value="option1" v-model="selectedOption" @click="handleClick($event)">
<label for="radio1">Option 1</label>
<input type="radio" id="radio2" value="option2" v-model="selectedOption" @click="handleClick($event)">
<label for="radio2">Option 2</label>
<button @click="isOpen = !isOpen">{{ isOpen ? 'Close' : 'Open' }}</button>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: 'option1',
isOpen: false
}
},
methods: {
handleClick(event) {
if (this.isOpen && event.target.value === this.selectedOption) {
event.preventDefault();
}
}
}
}
</script>
```
在上面的例子中,我们使用`v-model`来绑定单选框的值到`selectedOption`上。我们还有一个`isOpen`的变量来表示打开按钮的状态。
在`handleClick`方法中,我们首先判断是否为打开按钮的状态,如果是,我们再判断当前点击的单选框是否已经被选中,如果是,则通过`event.preventDefault()`取消选中。这样就可以实现点击打开按钮时,不能选中单选框的需求了。
阅读全文