微信小程序表单组件数据的动态获取Demo

寥寥几行代码实现微信小程序表单数据的双向绑定,直接上代码

//wxml
//data-name属于自定义的属性,可以在js的DOM操作中通过dataset属性来获取。相同的data-name属性,是为了动态的获取数据
<input type='text' placeholder='请输入你的密码' data-name='userName' bindinput='gainImportValue'/>
<input type='password' placeholder='请输入你的密码' data-name='passWord' bindinput='gainImportValue'/>

//js
Page({
    
    
  data:{
    
    
    userName:"",
    passWord:""
  },
gainImportValue(e){
    
    
    const name=e.currentTarget.dataset.name;//哪一个输入框的数值发生改变,e这个对象就是指谁。
    const obj={
    
    };
    obj[name]=e.detail.value;//通过此方法为对象动态的设置属性
    this.setData(obj);//这样就实现了数据的双向绑定
}
})

猜你喜欢

转载自blog.csdn.net/weixin_45356397/article/details/103101051