uniapp提交表单填写的内容

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

<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>

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


5640239-f31b9834569c5753.png
发布了1167 篇原创文章 · 获赞 630 · 访问量 201万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览