需求:
性别男,value值为0 性别女,value值为1 点击保存按钮的时候 将选中的性别的value值提交
1:首先在data里面定义一个sex数组,将男女性别的对象分别填写在里面。
代码语言:javascript复制sex: [{
label: "男",
value: 0,
checked: true
}, {
label: "女",
value: 1
}],
2:在view,写一下标签 直接在官方文档里面查找 https://uniapp.dcloud.io/component/radio
代码语言:javascript复制<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选择的值放在这个对象里面,准备传参数给后端,这一步很重要哟
代码语言:javascript复制addressData: {
sex: 0,
}
4:一定要记得在method 里面写好 radioChange选择的方法
代码语言:javascript复制 radioChange(e) {
this.addressData.sex = this.radio = e.detail.value
},
5:说了那么多,不如放一个参考代码吧。
代码语言:javascript复制<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的框架 如果样式不一样,可引入此框架。