uni-app 单项按钮radio button 使用方式

最新推荐文章于 2024-07-24 16:36:17 发布

潘多编程

最新推荐文章于 2024-07-24 16:36:17 发布

阅读量3.5k

点赞数 1

分类专栏： uni-app

本文链接：https://blog.csdn.net/h356363/article/details/111995977

版权

uni-app 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文介绍了在uni-app中如何获取radiogroup选中的值，并将其传递给后台API。通过监听change事件，可以在vue方法中设置选中值为页面变量，然后在适当的时候调用API发送数据。同时，展示了如何根据后台数据控制radio的选中状态，确保页面与后台数据同步。

摘要由CSDN通过智能技术生成

获取uni-app radio button的选中的值如何传给后台

设置change方法监控用户选择

<view class="item">
					<iconfont type="user"></iconfont>
					<radio-group @change="radioChange">
					
						<label>
							<radio value="1" /><text>男</text>
						</label>
						<label>
							<radio value="2" /><text>女</text>
						</label>
					</radio-group>
				</view>

vue方法里面把选中的值赋值给一个页面变量

radioChange(e){
				console.log('type:' + e.detail.value);
				this.sex = e.detail.value;
			},

传值给后台API

根据后台数据，页面显示对应的uni-app radio button 被选中

页面上通过 checked的属性来控制是否选中

<view class="item">
                   <iconfont type="user"></iconfont>
                   <radio-group @change="radioChange">

                       <label>
                           <radio value="1" :checked='sex == 1' /><text>男</text>
                       </label>
                       <label>
                           <radio value="2" :checked='sex == 2'/><text>女</text>
                       </label>
                   </radio-group>
               </view>

页面变量