前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uniapp提交表单填写的内容

uniapp提交表单填写的内容

作者头像
王小婷
发布2020-02-13 00:00:14
4.3K0
发布2020-02-13 00:00:14
举报
文章被收录于专栏:编程微刊编程微刊

需求:点击提交按钮的时候,将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>

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档