vue实现选项排他
实现选项排他的基本思路
在Vue中实现选项排他（即单选效果）可以通过数据绑定和事件处理完成。核心是维护一个响应式变量存储当前选中项，通过v-model或v-on动态更新状态。
基于v-model的单选实现
使用v-model绑定同一变量到多个单选元素（如radio或自定义组件），Vue会自动处理排他逻辑：
<template>
<div>
<input type="radio" id="option1" value="option1" v-model="selectedOption">
<label for="option1">选项1</label>
<input type="radio" id="option2" value="option2" v-model="selectedOption">
<label for="option2">选项2</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
}
}
}
</script>自定义组件排他选择
对于非原生单选按钮（如按钮组），通过维护selected状态并手动更新：
<template>
<div>
<button
v-for="option in options"
:key="option.value"
@click="selectOption(option.value)"
:class="{ active: selectedOption === option.value }"
>
{{ option.label }}
</button>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'opt1', label: '选项A' },
{ value: 'opt2', label: '选项B' }
],
selectedOption: null
}
},
methods: {
selectOption(value) {
this.selectedOption = value
}
}
}
</script>使用计算属性优化
当选项状态需要派生计算时，可通过计算属性实现：
<script>
export default {
computed: {
isOptionSelected() {
return (value) => this.selectedOption === value
}
}
}
</script>注意事项
- 确保选项的
value具有唯一性 - 复杂场景可结合Vuex管理全局选择状态
- 动态生成的选项需确保
v-for的:key唯一 - 移动端开发注意触摸反馈的UI优化
以上方法均遵循Vue的响应式原则，当selectedOption变化时会自动触发视图更新。
