【微信小程序】 input双向数据绑定

在微信小程序中，js的数据和前端显示的数据是单数据流

• js里边的数据变了，前端能立刻显示
• 但如果前端数据变了，js不能改变

解决方法

写一个下面的js方法,名称可以任意取，用于绑定input输入

bindInput(e){
    // 表单双向数据绑定
    var that = this;
    var dataset = e.target.dataset;
    // data-开头的是自定义属性，可以通过dataset获取到，dataset是一个json对象
    var name = dataset.name;
    var value = e.detail.value;
    // 拼接对象属性名，用于为对象属性赋值
    var attributeName = 'dataList.' + name
    that.data[name] = value;
    that.setData({
      [attributeName]: that.data[name]
    });
    // console.log(that.data.goodList);
  }

其中需要更改的地方只有applyFormObject,这是一个在data中定义的对象

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

通过dataset获取到自定义的data-xxx属性值，该属性值就是input绑定的属性名称

比如data-name="lily"就等同于中的name属性,var name = dataset.name;

获取到属性的值以后在拼接对象名称后,通过that.setData方法完成对象属性赋值，便实现了对象属性的双向数据绑定。

使用

在小程序的wxml中定义data-name值对应对象属性名，然后在定义bindinput值对应刚刚的方法名称，即可将input的值实时绑定到对象dataList的属性上，方便表单提交。

<view class="form-item">
   <input class="input" bindinput="bindInput" data-name="name" placeholder="请输入姓名" auto-focus/>
 view>

<view class="form-item">
  <input type="number" class="input" maxlength="11" bindinput="bindInput" data-name="phone" placeholder="请输入手机号码" />
view>