uniapp实现多个单选框
时间: 2023-08-02 11:12:16 浏览: 82
uniapp多选标签/多选按钮/多选框源码
5星 · 资源好评率100%
要实现多个单选框,可以使用uni-radio组件。首先,在template中写入多个uni-radio组件,每个组件都有一个value属性表示它的值,例如:
```
<uni-radio value="1">选项1</uni-radio>
<uni-radio value="2">选项2</uni-radio>
<uni-radio value="3">选项3</uni-radio>
```
然后,在data中定义一个变量来保存当前选中的值,例如:
```
data() {
return {
selectedValue: ''
};
}
```
最后,在每个uni-radio组件中绑定一个change事件,当选中状态改变时更新selectedValue的值:
```
<uni-radio value="1" @change="onRadioChange">选项1</uni-radio>
<uni-radio value="2" @change="onRadioChange">选项2</uni-radio>
<uni-radio value="3" @change="onRadioChange">选项3</uni-radio>
methods: {
onRadioChange(event) {
this.selectedValue = event.detail.value;
}
}
```
这样,当用户选中某个选项时,selectedValue的值就会更新为对应的值。
阅读全文