微信小程序实现双向数据绑定的解决方案

前言

最近刚开始接触小程序的项目，发现微信小程序不能像vue那样直接通过指令进行双向数据绑定，所以搜集整理了一些微信小程序的数据绑定的方案

 通过 bindInput 方法

通过用标签属性 data- 绑定JS中的data数据，再通过bandinput 事件获取key值，最后利用模版 字符串赋值 给data中的值进行更新

<view>
    <view class="info_form">
        <view>姓名</view>
        <view>
            <input data-gater="formData.name" bindinput="inputFrame" value="{{ formData.name }}" type="text"
                placeholder="请输入姓名" />
        </view>
</view>

Page({
  data: {
    // 绑定的数据
    infoForm: {
      name: "",
    },
  },
  // input事件(内容改变时触发)
  inputFrame(e) {
    this.setData({
      [`${e.currentTarget.dataset.gater}`]: e.detail.value
    })
    console.log(this.data.infoForm);
  },
})