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

最新推荐文章于 2023-11-18 15:13:52 发布

小样还想跑

最新推荐文章于 2023-11-18 15:13:52 发布

阅读量789

点赞数 1

文章标签：微信小程序数据动态获取双向绑定自定义属性

本文链接：https://blog.csdn.net/weixin_45356397/article/details/103101051

版权

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

//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);//这样就实现了数据的双向绑定
}
})