微信小程序 常见input事件绑定
zhuxiaoqiang · 525浏览 · 发布于2020-12-04
在使用input事件时候,我们使用绑定不同的事件的方法,例如:
在wxml中绑定代码如下:
<view> <input type="number" bindchange="num1change"/></view>
<view> <input type="number" bindchange="num2change"/></view>
在index.js中bingchange 代码如下:
num1:0, num2:0, num1change:function(e){ this.num1=Number(e.detail.value) console.log('第一个数字为'+this.num1) }, num2change:function(e){ this.num2=Number(e.detail.value) console.log('第一个数字为'+this.num2) }
以上这种方法对于大量的imput组件的时候是很不友好的。
那怎么解决呢??
我们可以为多个imput组件绑定相同事件处理函数,然后为不同的input组件设置不懂的id或者dataset来使用。
1)通过id区分元素:
<view> <text>请输入第3个数字:</text> </view> <view> <input id="num3" type="number" bindchange="change"/> </view> <view> <text>请输入第4个数字:</text> </view> <view> <input id="num4" type="number" bindchange="change"/> </view>
change:function(e) { this[e.currentTarget.id]=Number(e.detail.value) }
通过e.currentTarget.id值为触发当前事件的input组件的id属性值,是num3和num4,通过this[]来设定this.num3和this.num4的值。e.detail.value是获取当前input的值。
2)通过dataset区分元素
<view> <text>请输入第3个数字:</text> </view> <view> <input data-id="num3" type="number" bindchange="change1"/> </view> <view> <text>请输入第4个数字:</text> </view> <view> <input data-id="num4" type="number" bindchange="change1"/> </view>
change1:function(e){ this[e.target.dataset.id]=Number(e.detail.value) }
e.target.dataset.id 来获取input组件中的data-id 属性值。e.target.dataset.名称的方式来获取 data-名称的值
相关推荐
android下vulkan与opengles纹理互通
talkchan · 1179浏览 · 2020-11-23 10:37:39
Android 使用RecyclerView实现轮播图
奔跑的男人 · 2175浏览 · 2019-05-09 17:11:13
微软发布新命令行工具 Windows Terminal
吴振华 · 869浏览 · 2019-05-09 17:15:04
在华为写了十几年代码,我为什么还没有被拿去“祭天”
追忆似水年华 · 1201浏览 · 2019-05-09 17:22:20
android 通过修改图片像素实现CircleImageView
吴振华 · 1127浏览 · 2019-05-09 22:26:56
我爱编程,我爱工作,更爱生活
分类专栏
最新发布
最热排行
0评论