核心方法

寫(xiě)一個(gè)下面的js方法,名稱(chēng)可以任意取，用于綁定input輸入

bindInput(e){
    // 表單雙向數(shù)據(jù)綁定
    var that = this;
    var dataset = e.currentTarget.dataset;
    // data-開(kāi)頭的是自定義屬性，可以通過(guò)dataset獲取到，dataset是一個(gè)json對(duì)象
    var name = dataset.name;
    
    var value = e.detail.value;
    // 拼接對(duì)象屬性名，用于為對(duì)象屬性賦值
    var attributeName = 'applyFormObject.' + name
    that.data[name] = value;
    that.setData({
      [attributeName]: that.data[name]
    });
    // console.log(that.data[name])
  },

其中需要更改的地方只有applyFormObject,這是一個(gè)在data中定義的對(duì)象

Page({
  data: {
    applyFormObject: {
      name: '',
      phone: ''
    }
});

通過(guò)dataset獲取到自定義的data-xxx屬性值，該屬性值就是input綁定的屬性名稱(chēng)，比如data-name="phone"就等同于<input type="text" name="phone">中的name屬性,var name = dataset.name;獲取到屬性的值以后在拼接對(duì)象名稱(chēng)，通過(guò)that.setData方法完成對(duì)象屬性賦值，便實(shí)現(xiàn)了對(duì)象屬性的雙向數(shù)據(jù)綁定。

如何使用

在小程序的wxml中定義data-name值對(duì)應(yīng)對(duì)象屬性名，然后在定義bindinput值對(duì)應(yīng)剛剛的方法名稱(chēng)，即可將input的值實(shí)時(shí)綁定到對(duì)象applyFormObject的屬性上，方便表單提交。

<view class="form-item">
   <input class="input" bindinput="bindInput" data-name="name" placeholder="請(qǐng)輸入姓名" auto-focus/>
 </view>

<view class="form-item">
  <input type="number" class="input" maxlength="11" bindinput="bindInput" data-name="phone" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" />
</view>