小程序批量獲取input的輸入值，監聽輸入框，數據同步

在使用小程序時，跟vue的數據綁定不一樣，沒有v-model這個屬性了，官網也只是給了一些事件監聽。

但是我們如果有多個表單時，需要寫多個事件來同步數據。這樣做很麻煩。下面的方法可以解決，只需要一個方法即可。

代碼直接上了：

　　wxml:

<view class='form'>
    <view class='item_box'>
      <input class="input" bindinput='inputWacth' data-model="phone" type="number" maxlength="11" placeholder="請輸入手機號碼" />
      <button class='yzm_btn' plain size='mini'>獲取驗證碼</button>
    </view>
    <view class='item_box'>
      <input class="input" bindinput='inputWacth' data-model='yzm' type="text" maxlength="6" confirm-type="done" placeholder="請輸入驗證碼"/>
    </view>
    <button style='margin-top:60rpx;' type='primary' bindtap='login'>登錄</button>
  </view>

　　

js:

data: {
    phone:'',
    yzm:''
  },
// 輸入監聽
  inputWacth:function(e){
    console.log(e);
    let item = e.currentTarget.dataset.model;
    this.setData({
      [item]: e.detail.value
    });
  }

這樣只需要一個方法即可解決所有輸入框數據同步。效果如下：