uniapp radio-group两个单选框只能选择一个
时间: 2024-10-19 20:05:39 浏览: 28
纯css3实现效果超级炫的checkbox复选框和radio单选框
UniApp 的 RadioGroup 组件主要用于创建一组互斥的单选选项。当你需要让用户在多个选项中选择一个时,RadioGroup非常适合。要设置两个 Radio 单选框(radio-item)只能选择一个,你可以按照以下步骤操作:
1. 首先,在页面模板上创建两个 RadioItem 元素,并给他们指定不同的值(比如 `value` 属性)作为唯一标识符。
```html
<view class="radio-group">
<radio-group v-model="selectedOption" @change="handleChange">
<radio-item value="option1">选项1</radio-item>
<radio-item value="option2">选项2</radio-item>
</radio-group>
</view>
```
2. 在 Vue 实例的 data 中,声明一个变量 `selectedOption` 来存储当前选中的值,默认设置为第一个选项。
```js
export default {
data() {
return {
selectedOption: 'option1', // 默认选择 option1
};
},
methods: {
handleChange(event) {
this.selectedOption = event.detail.value; // 当选择改变时更新 selectedOption
},
},
};
```
在这个例子中,当用户点击其中一个 Radio,`handleChange` 方法会被触发,将当前选中的 `value` 设置给 `selectedOption`,保持组内仅有一个被选中。
阅读全文