vue 中实现互斥选中
Vue 中实现互斥选中
在 Vue 中实现互斥选中（即单选效果）可以通过多种方式实现，以下是几种常见方法：
使用 v-model 和计算属性
通过 v-model 绑定一个变量，结合计算属性或方法实现互斥逻辑。例如，在单选按钮组中：
<template>
<div>
<input type="checkbox" v-model="selected" value="option1" @change="handleChange('option1')">
<label>Option 1</label>
<input type="checkbox" v-model="selected" value="option2" @change="handleChange('option2')">
<label>Option 2</label>
</div>
</template>
<script>
export default {
data() {
return {
selected: null
};
},
methods: {
handleChange(value) {
this.selected = this.selected === value ? null : value;
}
}
};
</script>使用单选框 (radio) 替代复选框
单选框 (radio) 天然支持互斥选中，只需将 name 属性设为相同值：
<template>
<div>
<input type="radio" v-model="selected" value="option1" id="option1">
<label for="option1">Option 1</label>
<input type="radio" v-model="selected" value="option2" id="option2">
<label for="option2">Option 2</label>
</div>
</template>
<script>
export default {
data() {
return {
selected: null
};
}
};
</script>动态绑定 checked 属性
通过动态绑定 checked 属性，手动控制选中状态：
<template>
<div>
<input
type="checkbox"
:checked="selected === 'option1'"
@change="selected = 'option1'"
>
<label>Option 1</label>
<input
type="checkbox"
:checked="selected === 'option2'"
@change="selected = 'option2'"
>
<label>Option 2</label>
</div>
</template>
<script>
export default {
data() {
return {
selected: null
};
}
};
</script>使用自定义组件
封装一个支持互斥选中的自定义组件：
<template>
<MutualCheckboxGroup v-model="selected">
<MutualCheckbox value="option1">Option 1</MutualCheckbox>
<MutualCheckbox value="option2">Option 2</MutualCheckbox>
</MutualCheckboxGroup>
</template>
<script>
import MutualCheckboxGroup from './MutualCheckboxGroup.vue';
import MutualCheckbox from './MutualCheckbox.vue';
export default {
components: { MutualCheckboxGroup, MutualCheckbox },
data() {
return {
selected: null
};
}
};
</script>注意事项
- 如果使用复选框实现互斥，需手动处理逻辑，避免直接依赖
v-model。 - 单选框 (
radio) 是更简单的实现方式，但可能不符合 UI 设计需求。 - 动态绑定
checked时，需确保状态更新与视图同步。
