uniapp提交选中的性别的value值
时间:2022-07-22
本文章向大家介绍uniapp提交选中的性别的value值,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求:
性别男,value值为0 性别女,value值为1 点击保存按钮的时候 将选中的性别的value值提交
1:首先在data里面定义一个sex数组,将男女性别的对象分别填写在里面。
sex: [{
label: "男",
value: 0,
checked: true
}, {
label: "女",
value: 1
}],
2:在view,写一下标签 直接在官方文档里面查找 https://uniapp.dcloud.io/component/radio
<radio-group @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
<view>
<radio :value="item.value" :checked="index === current" />
</view>
<view>{{item.name}}</view>
</label>
</radio-group>
3:定义一个对象,用来存放参数,将radio选择的值放在这个对象里面,准备传参数给后端,这一步很重要哟
addressData: {
sex: 0,
}
4:一定要记得在method 里面写好 radioChange选择的方法
radioChange(e) {
this.addressData.sex = this.radio = e.detail.value
},
5:说了那么多,不如放一个参考代码吧。
<template>
<view class="cu-form-group">
<view class="title">性别</view>
<radio-group @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in sex" :key="item.value">
<radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
</label>
</radio-group>
<view class="padding">
<button class="cu-btn block bg-blue margin-tb-sm lg" @click="confirm">保存</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
sex: [{
label: "男",
value: 0,
checked: true
}, {
label: "女",
value: 1
}],
addressData: {
sex: 0,
}
}
},
methods: {
radioChange(e) {
this.addressData.sex = this.radio = e.detail.value
},
confirm() {
let data = this.addressData
alert(JSON.stringify(data))
uni.request({
header: {
'Content-Type': 'application/json'
},
url: "xxxx",
method: 'POST',
data: JSON.stringify(data),
dataType: 'json',
success: (res) => {
uni.showToast({
title: '提交成功',
icon: 'success',
duration: 1000
})
},
});
},
}
}
</script>
<style>
</style>
我这里引入了colorui的框架 如果样式不一样,可引入此框架。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 从0到1开发测试平台(六)增加登录接口
- FFmpeg 开发(04):FFmpeg + OpenGLES 实现音频可视化播放
- 【剑指offer】31.整数中1出现的次数
- 【剑指offer】35.数组中的逆序对
- 针对用友ic读卡器 web 脚本的重构
- NIO实现多人聊天室
- NIO与零拷贝
- c++奇淫技巧之完美转发
- 控制论与科学方法论-控制与反馈
- 使用docker测试静态网站
- 看看这样的程序排错经历是否似曾相识
- Mysql索引解密(上)
- Kubernetes Dashboard 可视化插件部署 博主亲自实践可用
- Jmeter接口压测示例
- Kubernetes_v1.18.2环境搭建 博主亲自实践可用