微信小程序 常见input事件绑定 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序 常见input事件绑定

发表时间:2021-1-5

发布人:葵宇科技

浏览次数:87

在使用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-名称的值

相关案例查看更多