微信小程序 - input 实现双向数据绑定（实时更新数据变化）

前言

我们知道，Vue 项目实现双向绑定很轻松，但在小程序项目中却不能如此简单的实现。

在微信小程序中，需要借助 input 组件的 bindinput 属性，每次输入值触发函数更新来完成。

实现

input 组件官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

wxml：

<!-- 显示双向绑定的数据变动 -->
<text>数据：{{ message }}</text>
<!-- END -->

<!-- 用户输入框(实时改变数据) -->
<!-- 给input框绑定bindinput属性 -->
<!-- bindinput属性请查阅官方文档 -->
<input
style="border:2px solid red"
type="text"
bindinput="messageChang">
</input>
<!-- END -->

js：

Page({

  /*
  * 事件处理
  */
  data: {
    message: ''//用户输入框数据
  },

  /*
  * 事件处理
  */

  /*
  * 【当用户输入数据时(每当)就会触发函数】
  * 设置了bindinput属性后会返回对象(e)
  * 你也可以先console一下e对象看看是什么
  * 然后通过e对象获取输入框value值
  * 最后setDate实时更新到message上
  */
  messageChang: function(e) {
    
    // 获取输入框当前value值
    let value = e.detail.value

    // 及时更新数据
    this.setData({
      message: value
    })
  }

})