uniapp提交表单填写的内容

需求：点击提交按钮的时候，将input 里面填写的姓名，班级，手机号，寝室号提交给后端。

代码语言：javascript复制

<template>
    <view class="content">
        <view class="row b-b">
            <text class="tit">姓名</text>
            <input class="input" type="text" v-model="addressData.name" placeholder="请输入姓名" placeholder-class="placeholder" />
        </view>
        <view class="row b-b">
            <text class="tit">班级</text>
            <input class="input" type="text" v-model="addressData.rank" placeholder="请输入班级" placeholder-class="placeholder" />
        </view>
        <view class="row b-b">
            <text class="tit">手机号</text>
            <input class="input" type="number" v-model="addressData.mobile" placeholder="请输入手机号码" placeholder-class="placeholder" />
        </view>
        <view class="row b-b">
            <text class="tit">寝室号</text>
            <input class="input" type="text" v-model="addressData.room" placeholder="请输入寝室号" placeholder-class="placeholder" />
        </view>

        <button class="add-btn" @click="confirm">提交</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                addressData: {
                    name: '',
                    mobile: '',
                    rank: '',
                    room: '',
                }
            }
        },
        onLoad(option) {},
        methods: {
            //提交
            confirm() {
                let data = this.addressData;
                console.log(JSON.stringify(data))

            },
        }
    }
</script>

<style lang="scss">
    page {
        padding-top: 16upx;
    }

    .row {
        display: flex;
        align-items: center;
        position: relative;
        padding: 0 30upx;
        height: 110upx;
        background: #fff;

        .tit {
            flex-shrink: 0;
            width: 120upx;
            font-size: 30upx;

        }

        .input {
            flex: 1;
            font-size: 30upx;

        }

        .icon-shouhuodizhi {
            font-size: 36upx;

        }
    }

    .add-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 690upx;
        height: 80upx;
        margin: 60upx auto;
        background-color: rgb(28, 42, 134);
        color: #fff;

        border-radius: 10upx;
        box-shadow: 1px 2px 5px rgba(28, 42, 134, 0.4);
    }
</style>

可以在控制台看到，自己填写的表单内容了。

input 表单

0 人点赞