<think>在Vue3中，
判断单选框的
选中状态主要依赖于响应式数据（如ref或reactive）的变化。以下是几种常见的
方法：
###
方法1：使用v-model绑定响应式变量（推荐）
通过v-model绑定一个响应式变量，该变量的值即为当前
选中的
单选框的值。通过比较该变量与
单选框的value值，即可
判断是否选中。
```vue
<template>
<div>
<label>
<input
type="
radio" v-model
="selectedFruit" value
="apple"> Apple
</label>
<label>
<input
type="
radio" v-model
="selectedFruit" value
="banana"> Banana
</label>
<label>
<input
type="
radio" v-model
="selectedFruit" value
="orange"> Orange
</label>
<p v-if
="selectedFruit
=== 'apple'">Apple is selected</p>
<p v-else-if
="selectedFruit
=== 'banana'">Banana is selected</p>
<p v-else-if
="selectedFruit
=== 'orange'">Orange is selected</p>
<p v-else>No fruit selected</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const selectedFruit
= ref(''); // 初始为空，表示未
选中
</script>
```
**
判断逻辑：**
- 当`selectedFruit`的值等于某个
单选框的value时，该
单选框被
选中。
- 若`selectedFruit`为空（或初始值），则没有
单选框被
选中。
###
方法2：使用计算属性
如果需要在多个地方
判断选中状态，可以使用计算属性来封装逻辑。
```vue
<script setup>
import { ref, computed } from 'vue';
const selectedFruit
= ref('');
// 计算属性：
判断是否选中了苹果
const isAppleSelected
= computed(()
=> selectedFruit.value
=== 'apple');
// 计算属性：
判断是否有任何选项被
选中
const isAnySelected
= computed(()
=> selectedFruit.value !
== '');
</script>
<template>
<!--
单选框代码同上 -->
<p v-if
="isAppleSelected">Apple is selected</p>
<p v-else-if
="!isAnySelected">No fruit selected</p>
</template>
```
###
方法3：使用事件处理函数
在
单选框的change事件中，可以通过事件对象获取当前
选中的状态。
```vue
<template>
<div>
<label>
<input
type="
radio" name
="fruit" value
="apple" @change
="handleChange"> Apple
</label>
<label>
<input
type="
radio" name
="fruit" value
="banana" @change
="handleChange"> Banana
</label>
<label>
<input
type="
radio" name
="fruit" value
="orange" @change
="handleChange"> Orange
</label>
<p>{{ message }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const message
= ref('No fruit selected');
const handleChange
= (event)
=> {
// 通过event.target.checked可以知道当前
单选框是否被
选中（但通常一组
单选框中只有一个会被
选中）
// 通过event.target.value可以知道当前
单选框的值
if (event.target.checked) {
message.value
= `${event.target.value} is selected`;
}
};
</script>
```
注意：在事件处理函数中，`event.target.checked`在
单选框被
选中时会变为`true`，但通常我们更关心的是
选中的值。
###
方法4：自定义
单选框组件
当使用自定义
单选框组件时，通常通过v-model绑定值，然后在组件内部通过prop
判断是否选中。
**自定义
单选框组件（Custom
Radio.vue）:**
```vue
<template>
<label>
<input
type="
radio"
:checked
="isChecked"
@change
="$emit('update:modelValue', value)"
/>
<span>{{ label }}</span>
</label>
</template>
<script setup>
import { computed } from 'vue';
const props
= defineProps({
modelValue: { // 用于v-model绑定
type: [String, Number, Boolean],
required: true
},
value: { // 该
单选框对应的值
type: [String, Number, Boolean],
required: true
},
label: String
});
//
判断当前
单选框是否被
选中：当modelValue等于该组件的value时，即为
选中
const isChecked
= computed(()
=> props.modelValue
=== props.value);
</script>
```
**使用自定义组件：**
```vue
<template>
<Custom
Radio
v-model
="selectedFruit"
value
="apple"
label
="Apple"
/>
<Custom
Radio
v-model
="selectedFruit"
value
="banana"
label
="Banana"
/>
<p>Selected: {{ selectedFruit }}</p>
</template>
<script setup>
import { ref } from 'vue';
import Custom
Radio from './Custom
Radio.vue';
const selectedFruit
= ref('');
</script>
```
###
判断未
选中的状态
- 在v-model绑定的响应式变量为初始值（如空字符串、null、undefined）时，可以认为没有
单选框被
选中。
- 可以通过计算属性来封装“未
选中”状态。
```vue
<script setup>
import { ref, computed } from 'vue';
const selectedFruit
= ref(null); // 初始为null，表示未
选中
// 计算属性：
是否有
选中
const hasSelection
= computed(()
=> selectedFruit.value !
== null);
// 计算属性：
是否未
选中
const noSelection
= computed(()
=> !hasSelection.value);
</script>
```
### 总结
在Vue3中，
判断单选框选中状态的核心是：
1. **使用v-model绑定响应式变量**：该变量的值即为
选中的
单选框的值。
2. **通过比较响应式变量与
单选框的值**：相等即为
选中，否则未
选中。
3. **未
选中的状态**：当响应式变量为初始值（空、null、undefined）时，表示未
选中。
§§相关问题§§:
1. Vue3中v-model与.sync修饰符有什么区别？
2. 在Vue3中如何
实现自定义组件的v-model？
3. Vue3的Composition API中，ref和reactive的使用场景有何不同？
4. 如何在Vue3中
实现单选框组的动态渲染？</think>### Vue3 中
判断单选框选中和未
选中的
方法
在 Vue3 中，
判断单选框的
选中状态有多种
方法，下面我将详细介绍每种
方法的
实现和适用场景：
####
方法一：使用 v-model + 直接比较（推荐）
```vue
<template>
<div>
<label>
<input
type="
radio" v-model
="selectedOption" value
="A"> 选项A
</label>
<label>
<input
type="
radio" v-model
="selectedOption" value
="B"> 选项B
</label>
<!--
判断选中状态 -->
<p v-if
="selectedOption
=== 'A'">选项A被
选中</p>
<p v-else-if
="selectedOption
=== 'B'">选项B被
选中</p>
<p v-else>没有选项被
选中</p>
<!--
判断未
选中状态 -->
<p v-if
="!selectedOption">当前未
选择任何选项</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const selectedOption
= ref(null); // 初始为 null 表示未
选中
</script>
```
**原理说明：**
- `v-model` 将
单选框的值绑定到响应式变量 `selectedOption`
- 通过比较 `selectedOption` 的值与选项值
判断选中状态
- 当 `selectedOption` 为 falsy 值（`null`、`undefined`、`''`）时表示未
选中
####
方法二：使用计算属性
```vue
<template>
<div>
<label>
<input
type="
radio" v-model
="color" value
="red"> 红色
</label>
<label>
<input
type="
radio" v-model
="color" value
="blue"> 蓝色
</label>
<!-- 使用计算属性
判断状态 -->
<p>{{ selectionStatus }}</p>
<p v-if
="isNothingSelected">请
选择一个颜色</p>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const color
= ref('');
//
判断选中状态的计算属性
const selectionStatus
= computed(()
=> {
if (color.value
=== 'red') return '红色被
选中';
if (color.value
=== 'blue') return '蓝色被
选中';
return '未
选择';
});
//
判断未
选中状态的计算属性
const isNothingSelected
= computed(()
=> !color.value);
</script>
```
**优势：**
- 将状态
判断逻辑封装在计算属性中
- 模板代码更简洁
- 逻辑复用更方便
####
方法三：使用事件处理
```vue
<template>
<div>
<label>
<input
type="
radio"
name
="size"
value
="small"
@change
="handleChange($event, 'small')"
> 小号
</label>
<label>
<input
type="
radio"
name
="size"
value
="large"
@change
="handleChange($event, 'large')"
> 大号
</label>
<p>
选中状态: {{ selectedSize || '未
选择' }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const selectedSize
= ref('');
const handleChange
= (event, size)
=> {
//
判断选中状态
if (event.target.checked) {
selectedSize.value
= size;
console.log(`${size}被
选中`);
}
//
判断未
选中状态（
单选框组中通常不需要，因为
选择另一个会自动取消前一个）
};
</script>
```
**适用场景：**
- 需要在
选择时执行额外逻辑
- 需要访问事件对象
- 需要处理自定义验证逻辑
####
方法四：使用动态类绑定（视觉反馈）
```vue
<template>
<div class
="
radio-group">
<div
v-for
="option in options"
:key
="option.value"
@click
="selected
= option.value"
:class
="['
radio-item', {
'selected': selected
=== option.value,
'unselected': selected && selected !
== option.value
}]"
>
{{ option.label }}
</div>
<p v-if
="!selected">请
选择一个选项</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const options
= ref([
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
{ label: '选项3', value: 3 }
]);
const selected
= ref(null);
</script>
<style>
.
radio-item {
padding: 10px;
margin: 5px;
border: 1px solid #ddd;
cursor: pointer;
}
.selected {
background-color: #409eff;
color: white;
border-color: #409eff;
}
.unselected {
opacity: 0.6;
background-color: #f5f7fa;
}
</style>
```
**特点：**
- `selected` 类表示当前
选中项
- `unselected` 类表示其他未
选中项
- 当 `selected` 为 null 时所有项都是未
选中状态
####
方法五：使用组件 ref
判断
```vue
<template>
<div>
<label>
<input
type="
radio"
name
="payment"
value
="credit"
ref
="credit
Radio"
v-model
="paymentMethod"
> 信用卡
</label>
<label>
<input
type="
radio"
name
="payment"
value
="paypal"
ref
="paypal
Radio"
v-model
="paymentMethod"
> PayPal
</label>
<button @click
="checkSelection">
检查选中状态</button>
<p>{{ statusMessage }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const credit
Radio = ref(null);
const paypal
Radio = ref(null);
const paymentMethod
= ref('');
const statusMessage
= ref('');
const checkSelection
= ()
=> {
//
判断选中状态
if (credit
Radio.value.checked) {
statusMessage.value
= '信用卡被
选中';
} else if (paypal
Radio.value.checked) {
statusMessage.value
= 'PayPal被
选中';
} else {
statusMessage.value
= '未
选择任何支付方式';
}
};
</script>
```
**适用场景：**
- 需要直接访问 DOM 属性
- 与第三方库集成
- 特殊情况下需要访问原生 DOM
###
判断选中状态的进阶技巧
#### 1. 使用组合式函数封装逻辑
```javascript
// use
RadioSelection.
js
import { ref, computed } from 'vue';
export function use
RadioSelection(initialValue
= null) {
const selected
= ref(initialValue);
//
判断是否选中特定值
const isSelected
= (value)
=> computed(()
=> selected.value
=== value);
//
判断是否有
选中项
const hasSelection
= computed(()
=> selected.value !
== null);
// 重置
选择
const resetSelection
= ()
=> {
selected.value
= null;
};
return {
selected,
isSelected,
hasSelection,
resetSelection
};
}
```
```vue
<script setup>
import { use
RadioSelection } from './use
RadioSelection';
const { selected, isSelected, hasSelection }
= use
RadioSelection();
const options
= [
{ label: '选项A', value: 'a' },
{ label: '选项B', value: 'b' }
];
</script>
<template>
<div v-for
="opt in options" :key
="opt.value">
<input
type="
radio"
v-model
="selected"
:value
="opt.value"
> {{ opt.label }}
</div>
<p v-if
="isSelected('a').value">选项A被
选中</p>
<p v-if
="isSelected('b').value">选项B被
选中</p>
<p v-if
="!hasSelection">未
选择任何选项</p>
</template>
```
#### 2. 在
表单验证中使用
```vue
<template>
<form @submit.prevent
="submitForm">
<div v-for
="opt in options" :key
="opt.value">
<input
type="
radio"
v-model
="selectedOption"
:value
="opt.value"
required
> {{ opt.label }}
</div>
<p v-if
="error" class
="error">{{ error }}</p>
<button
type="submit">
提交</button>
</form>
</template>
<script setup>
import { ref } from 'vue';
const selectedOption
= ref(null);
const error
= ref('');
const options
= [
{ label: '同意', value: 'agree' },
{ label: '不同意', value: 'disagree' }
];
const submitForm
= ()
=> {
//
判断是否未
选中
if (!selectedOption.value) {
error.value
= '请
选择一个选项';
return;
}
// 处理
表单提交
console.log('
选中的选项:', selectedOption.value);
};
</script>
```
#### 3. 使用 Watch 监听状态变化
```vue
<script setup>
import { ref, watch } from 'vue';
const selected
= ref(null);
watch(selected, (newVal, oldVal)
=> {
//
判断选中状态变化
if (newVal) {
console.log(`选项 ${newVal} 被
选中`);
} else if (oldVal && !newVal) {
console.log(`选项 ${oldVal} 被取消
选中`);
} else {
console.log('初始未
选择状态');
}
//
判断未
选中状态
if (!newVal) {
console.warn('当前没有
选中任何选项');
}
});
</script>
```
### 特殊场景处理
#### 1. 处理布尔值选项
```vue
<template>
<label>
<input
type="
radio" v-model
="isActive" :value
="true"> 激活
</label>
<label>
<input
type="
radio" v-model
="isActive" :value
="false"> 禁用
</label>
<p v-if
="isActive
=== true">激活状态</p>
<p v-else-if
="isActive
=== false">禁用状态</p>
<p v-else>未
选择状态</p>
</template>
<script setup>
import { ref } from 'vue';
const isActive
= ref(null); // 使用 null 表示未
选择
</script>
```
#### 2. 动态选项列表
```vue
<template>
<div v-for
="item in dynamicOptions" :key
="item.id">
<input
type="
radio"
v-model
="selectedId"
:value
="item.id"
> {{ item.name }}
</div>
<p v-if
="selectedId">已
选择ID: {{ selectedId }}</p>
<p v-else>请
选择一个选项</p>
</template>
<script setup>
import { ref, watch } from 'vue';
// 动态选项
const dynamicOptions
= ref([
{ id: 1, name: '第一项' },
{ id: 2, name: '第二项' }
]);
const selectedId
= ref(null);
// 当选项变化时重置
选择
watch(dynamicOptions, (newOptions)
=> {
if (!newOptions.some(opt
=> opt.id
=== selectedId.value)) {
selectedId.value
= null;
}
});
</script>
```
### 最佳实践总结
1. **优先使用 v-model + 响应式变量**：这是 Vue 最自然的状态管理方式
2. **复杂逻辑使用计算属性**：封装状态
判断逻辑，保持模板简洁
3. **未
选中状态用 falsy 值表示**：`null`、`undefined` 或空字符串 `''`
4. **视觉反馈使用动态类绑定**：提供直观的用户体验
5. **
表单验证处理未
选中情况**：确保必填项有
选中值
6. **组合式函数封装复用逻辑**：提高代码复用性和可维护性
扫一扫
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
