uniapp 判断单选
时间: 2025-06-05 11:54:16 浏览: 13
### 如何在 UniApp 中实现单选功能
为了实现在 UniApp 应用中的单选功能,可以利用 Vue 的双向绑定特性和 `v-model` 指令来简化状态管理。下面是一个基于 ccRadioView 组件的示例[^2]。
#### 单选框组件模板结构
```html
<template>
<view class="radio-group">
<!-- 循环渲染选项 -->
<label v-for="(item, index) in options" :key="index" @click="handleClick(item.value)">
<text>{{ item.label }}</text>
<input type="radio" :value="item.value" v-model="selectedValue"/>
</label>
</view>
</template>
```
此部分展示了如何通过循环遍历 `options` 数组并为每个项创建标签和输入控件。当用户点击某个选项时会触发 `handleClick()` 方法更新当前选定值。
#### JavaScript 部分逻辑处理
```javascript
<script setup lang="ts">
import { ref } from 'vue';
// 定义属性
const props = defineProps({
modelValue: {
type: String,
default: ''
},
});
// 双向绑定 selectedValue 到父组件传递过来的数据
let selectedValue = ref(props.modelValue);
function handleClick(value:string){
// 更新内部变量的同时通知外部变化
selectedValue.value=value;
emit('update:modelValue', value);
}
defineEmits(['update:modelValue']);
</script>
```
上述脚本定义了一个名为 `ccRadioView` 的单选框组件,它接收来自其父级作用域的一个初始选择值作为 prop (`modelValue`) 并将其存储在一个响应式的本地副本里(`selectedValue`). 当用户交互改变选择时,则不仅改变了自身的状态还调用了 `$emit()` 函数告知外界发生了变更.
#### 使用方式说明
要在其他地方使用这个自定义好的单选框组件只需要像这样引入即可:
```html
<!-- Parent Component -->
<template>
<cc-radio-view v-model="currentSelection"></cc-radio-view>
</template>
<script setup lang="ts">
import CcRadioView from './path/to/CcRadioView.vue';
import {ref} from "vue";
let currentSelection=ref('');
</script>
```
这里演示了怎样把 `<CcRadioView>` 插入到另一个页面或者容器里面去,并且借助于 `v-model` 来保持两者之间的同步关系。
阅读全文
相关推荐


















