微信小程序通过监听器实现数据的双向绑定

微信小程序wxml

在微信小程序中有一个简易的双向绑定

简易双向绑定

但是这个双向绑定只能绑定简单的值，无法绑定复杂对象的属性值

用法：

<input model:value="{{value}}" />

错误用法：

<input model:value="{{ a.b }}" />

设置一个监听器，并绑定到输入框中，并设置一个唯一标识符id

<van-field
           bindinput="inputListener"
           id="stuTel"
           label="手机号"
           placeholder="{{student.stuTel}}"
           error-message="{{phoneErr}}"
           bind:blur="checkPhoneEmpty"
           />
<van-field
           bindinput="inputListener"
           id="stuEmail"
           label="邮箱"
           placeholder="{{student.stuEmail}}"
           error-message="{{mailErr}}"
           bind:blur="checkMailEmpty"
           />

js

e.currentTarget.id可以获取从当前输入框对应的id，这个id将用来绑定对象的对应的值。

// 数据监听实现双向绑定
inputListener(e){
    let inputType = e.currentTarget.id;
    this.setData({
        [`student.${inputType}`]: e.detail
    })
}

实现效果

初始值

修改后：