uniapp单选框实现数据绑定
时间: 2025-01-10 16:14:24 浏览: 102
### UniApp 中单选框数据绑定的实现
在 UniApp 中,`<radio>` 和 `<radio-group>` 组件用于创建单选按钮组。为了实现单选框的数据绑定,可以利用 `v-model` 或者直接操作 `value` 属性来同步 Vue 的状态与视图。
#### 使用 v-model 进行双向绑定
当使用 `v-model` 时,它会自动处理输入控件和应用状态之间的连接:
```html
<template>
<view>
<radio-group @change="handleChange">
<label v-for="(item, index) in items" :key="index">
<radio :value="item.id">{{ item.name }}</radio>
</label>
</radio-group>
</view>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
items: [
{ id: '1', name: 'Option A' },
{ id: '2', name: 'Option B' },
{ id: '3', name: 'Option C' }
]
};
},
methods: {
handleChange(event) {
this.selectedValue = event.detail.value;
console.log('Selected:', this.selectedValue);
}
}
};
</script>
```
此代码片段展示了如何通过 `v-model` 将选定项保存到组件的状态中[^1]。
#### 手动管理 value 属性
如果不希望使用 `v-model`,也可以手动设置 `value` 并监听变化事件更新内部变量:
```html
<template>
<view>
<radio-group @change="handleRadioChange">
<block v-for="(option, idx) in options" :key="idx">
<label class="uni-list-cell uni-collapse">
<view>{{ option.label }}</view>
<radio :checked="selected === option.value" :value="option.value"/>
</label>
</block>
</radio-group>
</view>
</template>
<script>
export default {
data() {
return {
selected: null,
options: [{ label: "Apple", value: "apple" }, { label: "Banana", value: "banana" }]
};
},
methods: {
handleRadioChange(e) {
const val = e.target.value;
this.selected = val;
}
}
};
</script>
```
这段代码说明了即使不依赖于 `v-model`,仍然可以通过控制属性并响应事件来进行有效的数据绑定[^2]。
对于更复杂的场景,比如需要保持多个页面间的选择一致性或持久化存储用户的偏好设置,则可能涉及到 Vuex store 或本地存储机制的应用。
阅读全文
相关推荐


















