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

第一种是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>

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

---

第二种是双向数据绑定，v-model

需要绑定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>

效果打印：

第三种脱离form表单提交，通过button点击事件获取

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

效果：