0
点赞
收藏
分享

微信扫一扫

uni-app获取form原生表单输入值的几种方式

需要给form表单绑定@submit="formSubmit"方法
需要给input表单元素绑定name属性(必须,不然得到的是空对象)
需要给button组件绑定form-type="submit"监听

代码:

<template>
    <view class="content">
        <form @submit="formSubmit">
            <input type="text" name="userName" placeholder="用户"/>
            <input type="text" name="password" password=""  placeholder="密码"/>
            <button type="primary" form-type="submit">登录</button>
        </form>
    </view>
</template>

<script>
    export default {
        methods: {
            formSubmit(e){
                console.log(e.detail.value)
            }
        }
    }
</script>

获取用户的输入信息效果:



需要绑定form表单并且将绑定的值传进去:@submit="formSubmit(userInfo)" v-model="userInfo"
需要绑定用户框:v-model="userInfo.userName"
需要绑定密码框v-model="userInfo.password"

<template>
    <view class="content">
        <form @submit="formSubmit(userInfo)" v-model="userInfo">
            <input type="text" v-model="userInfo.userName" placeholder="用户"/>
            <input type="text" v-model="userInfo.password" password=""  placeholder="密码"/>
            <button type="primary" form-type="submit">登录</button>
        </form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                userInfo: {
                    userName:'',
                    password:''
                }
            }
        },
        methods: {
            formSubmit(e){
                console.log(e)
            }
        }
    }
</script>

效果打印:


<template>
    <view class="content">
            <input type="text" v-model="userInfo.userName" placeholder="用户"/>
            <input type="text" v-model="userInfo.password" password=""  placeholder="密码"/>
            <button type="primary" @tap="submit(userInfo)">登录</button>
        </form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                userInfo: {
                    userName:'',
                    password:''
                }
            }
        },
        methods: {
            submit(e){
                console.log(e)
            }
        }
    }
</script>

效果:


举报

相关推荐

0 条评论