uni-app如何获取输入框的内容

此文章来源于http://dt2008.cn/130
这个用处的范围挺广的，用处：注册、登陆、搜索、提交(发布)文章等，小编就教大家uni-app如何获取输入框的内容

以下案例是用于登陆注册。

<view class="uni-form-item uni-column">
    <view class="title">账号</view>
    <input class="uni-input" v-model="username" focus placeholder="请输入账号" />
</view>
			   
<view class="uni-form-item uni-column">
    <view class="title">密码</view>
    <input class="uni-input" v-model="password" password type="text" placeholder="请输入密码" />
</view>
<button type="primary" plain="true" @tap="zhuce">注册</button>

小编在input输入框添加了 v-model ，v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素 。它负责监听用户的输入事件以更新数据。

html写完了，就写js了

在return里定义username(账号)、password(密码)空的值

export default {
    data() {
        return {
            username:"",
	        password:""
	    }
    },
    methods: {
    }
}

然后在做点击事件获取这两个输入框的值

export default {
    data() {
        return {
            username:"",
	    password:""
	}
    },
    methods: {
        zhuce(){
            //账号
	    let username = this.username;
	    //密码
	    let password = this.password;

            //写完上面定义后就打印一下
            console.log(username);
            console.log(password);
        }
    }
}

做完后，可以填写账号密码打印出来试试效果
这篇文章希望对您有帮助