[表单提交小案例]
在表单域form中，
第一，提交按钮的form-type类型要是submit，第二是form表单中要绑定一个事件，然后在methods中通过实参接收到输入的内容，第三是输入框要有一个name，name就是获取值的时候的key，输入的值就是value
<template>
<view>
<form action="" @submit="onSubmit">
<view class="row">
<input type="text" name="username">
</view>
<view >
<textarea name="content"></textarea>
</view>
<view class="">
<button form-type="submit" type="primary">提交表单</button>
<button form-type="reset" >重置表单</button>
</view>
</form>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
onSubmit(e){
console.log(e);
}
}
}
</script>
<style lang="scss">
input, textarea{
border: 1px solid #eee;
}
.row {
padding: 20rpx 0;
}
</style>
在输入框中输入内容之后，点击提交，可以在微信小程序中获取到这个对象
对象中有一个detail，获取到的值就在detail的value中
[上面可以拿到结果之后，还是老套路，在data中定义一个初始值，然后在methods中，将实参中的值赋给this.obj，这样就可以拿到输入的值了]
<template>
<view>
<form action="" @submit="onSubmit">
<view class="row">
<input type="text" name="username">
</view>
<view >
<textarea name="content"></textarea>
</view>
<view class="">
<button form-type="submit" type="primary">提交表单</button>
<button form-type="reset" >重置表单</button>
</view>
</form>
{{obj.username}}--{{obj.content}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
obj: null,
}
},
methods:{
onSubmit(e){
this.obj = e.detail.value
}
}
}
</script>
<style lang="scss">
input, textarea{
border: 1px solid #eee;
}
.row {
padding: 20rpx 0;
}
</style>
用radio写一个单选框
单选框使用radio-group 做一个单选框组,还是给radio-group一个name，才能在控制台接收到输入的值
<template>
<view>
<form action="" @submit="onSubmit">
<view class="row">
<input type="text" name="username">
</view>
<view >
<textarea name="content"></textarea>
</view>
<view class="">
<radio-group name="gender">
<radio value="0">女</radio>
<radio value="1">男</radio>
<radio value="2">保密</radio>
</radio-group>
</view>
<view class="">
<button form-type="submit" type="primary">提交表单</button>
<button form-type="reset" >重置表单</button>
</view>
</form>
{{obj.username}}--{{obj.content}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
obj: null,
}
},
methods:{
onSubmit(e){
this.obj = e.detail.value
}
}
}
</script>
<style lang="scss">
input, textarea{
border: 1px solid #eee;
}
.row {
padding: 20rpx 0;
}
</style>
[picker 底部弹出滚动选择器]
<view class="row">
<picker>
<view>点击选择学历：</view>
</picker>
</view>
[选择器中的数据先在data中预先定义，key是range，value是在data中定义好的数据,要获取到他的数据，同样也是要一个name]
<view class="row" >
<picker :range="options" name="education">
<view>点击选择学历</view>
</picker>
</view>
<script>
export default {
data() {
return {
obj: null,
options:["高中","大专","本科","博士"]
}
},
methods:{
onSubmit(e){
this.obj = e.detail.value
}
}
}
</script>
选择器获取到的值是数组的索引，不是值，例如这里选择的是博士，返回值就是3
现在的picker选择器是不能改变值的
之前给了选择器一个默认值，点击选择后，值不会变，还是默认的本科，要让选择的值能显示出来，需要给picker标签绑定一个事件@change，点击选择后触发了change事件，通过js重写默认值才能实现值的改变
选了博士之后，显示的还是默认值本科，没有变成博士
加了change事件之后，在下面写方法，就可以获取到选择的值了
<picker :range="options" name="education" :value="selectValue" @change="pickerChange">
pickerChange (e){
console.log(e);
}
选择大专之后，返回值为1
通过change事件重新给默认值赋值
methods:{
onSubmit(e){
this.obj = e.detail.value
},
pickerChange(e){
this.selectValue = e.detail.value
}
}
现在能改变了
在做数据提交时，一般都是提交的数字，如果嫌数字不好看，也可以在onsubmit中，重新赋值this.obj.education=this.options[this.selectValue]
这样，在控制台看到的提交的数据就是文字而不是数字了
