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>

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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 书里面这部分叫序 先作个自我介绍,我是一名交互设计师,90后。 其实我不怎么喜欢编辑文章或写点什么,总觉得很难(l...
    IxDKN阅读 4,921评论 3 33
  • 一. 表单设计的影响与原则 1.1 表单的产生 由内而外,网站根据自身信息存储格式要求,从数据库映射成表单。 由外...
    晓梦蝉君阅读 12,158评论 1 30
  • HTML表单HTML表单用于搜集用户输入HTML表单常用属性及说明:属性描述accept-charset规定在被提...
    Lv_0阅读 507评论 0 1
  • 表单的作用 收集用户提供的信息,提交给服务器 常见表单元素 等 构成一个表单的基本结构 元素包含其他可用于创建表单...
    YYPL阅读 847评论 0 0
  • 通过对无数的表单设计A/B测试,以及一些大公司花费大量经费对表单设计的研究,下面总结出我认为最好的58个表单设计实...
    一米阳光_02f4阅读 2,217评论 0 5