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

喜欢ヅ旅行 2022-11-28 10:53 990阅读 0赞

## 前言 ##

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

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

## 实现 ##

![在这里插入图片描述][2020081715505242.gif_pic_center]

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

**wxml：**

<text>数据：{
       { message }}</text>
    
    
    
    
    
    <input style="border:2px solid red" type="text" bindinput="messageChang">
    </input>

**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
        })
      }
    
    })

[2020081715505242.gif_pic_center]: /images/20221124/3554ac766f1840f4938b4f41c14a7876.png
[https_developers.weixin.qq.com_miniprogram_dev_component_input.html]: https://developers.weixin.qq.com/miniprogram/dev/component/input.html