在使用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('第一個數(shù)字為'+this.num1)
  },
  num2change:function(e){
    this.num2=Number(e.detail.value)
    console.log('第一個數(shù)字為'+this.num2)
  }

以上這種方法對于大量的imput組件的時候是很不友好的。

那怎么解決呢？？

我們可以為多個imput組件綁定相同事件處理函數(shù)，然后為不同的input組件設(shè)置不懂的id或者dataset來使用。

1）通過id區(qū)分元素：

 <view>
    <text>請輸入第3個數(shù)字：</text>
  </view>
  <view>
    <input id="num3" type="number" bindchange="change"/>
  </view>
  <view>
    <text>請輸入第4個數(shù)字：</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值為觸發(fā)當(dāng)前事件的input組件的id屬性值，是num3和num4，通過this[]來設(shè)定this.num3和this.num4的值。e.detail.value是獲取當(dāng)前input的值。

2）通過dataset區(qū)分元素

<view>
    <text>請輸入第3個數(shù)字：</text>
  </view>
  <view>
    <input data-id="num3" type="number" bindchange="change1"/>
  </view>
  <view>
    <text>請輸入第4個數(shù)字：</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-名稱的值