表单案例

<template>
    <view>
        <form @submit="onsubmit">
            <view class="row">
                <input  type="text" name="username"/>
            </view>
            <view class="row">
                <textarea name="content"></textarea>
            </view>
            <view class="row">
                <radio-group name="gender">
                    <radio value="男">男</radio>
                    <radio value="女">女</radio>
                </radio-group>
            </view>
            <view class="row">
                <picker :range="options" name="school" :value="selectValue" @change="pickerChange">
                    <view>点击选择学历:{{options[selectValue]}}</view>
                </picker>
                <view>
                    <button form-type="submit" type="primary">提交表单</button>
                    <button form-type="reset">重置表单</button>
                </view>
                
            </view>
        </form>
        <view>{{obj}}</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                obj:null,
                options:["本科","高中","大专"],
                selectValue:0
            }
        },
        methods: {
            onsubmit(e){
                this.obj=e.detail.value
                this.obj.school=this.options[this.selectValue]
                console.log(this.obj)  //打印日志
            },
            pickerChange(e){
                this.selectValue=e.detail.value
            },
            
            
            
        }
    }
</script>

<style lang="scss">
    input,textarea{
    border: 1px solid red;    
    }
    .row{
        padding: 20rpx 0;
    }

</style>

对表单进行提交