Uni-app 单选框radio
时间: 2023-11-08 22:59:10 浏览: 205
在 uni-app 中,你可以使用 `uni-radio` 组件来实现单选框的功能。具体步骤如下:
1. 在需要使用单选框的页面中引入 `uni-radio` 组件:
```
<template>
<view>
<uni-radio-group>
<uni-radio value="1">选项1</uni-radio>
<uni-radio value="2">选项2</uni-radio>
<uni-radio value="3">选项3</uni-radio>
</uni-radio-group>
</view>
</template>
```
2. 在 `uni-radio-group` 组件中添加多个 `uni-radio` 组件,并为每个 `uni-radio` 组件添加一个 `value` 属性,用于区分不同的选项。
3. 如果需要获取用户选择的选项,可以在 `uni-radio-group` 组件上添加一个 `@change` 事件监听函数,当用户选择不同的选项时,会触发该事件,并将用户选择的选项的 `value` 值作为参数传递给事件监听函数:
```
<template>
<view>
<uni-radio-group @change="onChange">
<uni-radio value="1">选项1</uni-radio>
<uni-radio value="2">选项2</uni-radio>
<uni-radio value="3">选项3</uni-radio>
</uni-radio-group>
</view>
</template>
<script>
export default {
methods: {
onChange(value) {
console.log('用户选择了选项' + value);
}
}
}
</script>
```
这样就可以实现 uni-app 中的单选框功能了。
阅读全文