版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/nongweiyilady/article/details/82978786
项目中,一个表单中经常有好几个input,但是微信小程序并不像vue那样实现双向绑定,所以我们要自己去实现当用户输入的时候,实时获取用户输入的值。
方法比较简单,就两个步骤。
1.wxml
<input data-name='form.base.name' bindinput="inputChange" name="text" value="{{ form.base.name }}" placeholder="请输入姓名" />
2.js
page中有这个的data
data: {
avatar: '',
form: {
base: {
name: '',
age:0
}
}
实现一个公共方法去实时获取输入的值
//实时获取input输入
inputChange(e) {
const name = e.currentTarget.dataset.name;
this.setData({
[name]: e.detail.value
})
},
-
这里利用了setData中的key可以使用变量这个特性来实现,key为变量的时候要用[ ]引起来。在wxml中的input控件中,监听bindinput方法的时候使用data-name=‘form.base.name’ 传入这个data的key,在inputChange方法中获取到这个name,然后获取到用户输入的值,设置到data中即可。
-
如果有多个input,同样用上边的方法,然后bindinput绑定inputChange,传入key参数即可。