【小程序】input输入双向数据绑定

最新推荐文章于 2026-05-12 15:35:28 发布

原创最新推荐文章于 2026-05-12 15:35:28 发布 · 3.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序 #微信小程序

小程序专栏收录该内容

8 篇文章

订阅专栏

文章讲述了在微信小程序中，input标签的data绑定问题。当用户输入数据时，input的value不会自动更新到amount变量。解决方法是在bindinput事件中设置amount，例如使用`this.setData`更新amount的值。同时，文章提到了数值转换以及限制输入值范围的例子。

小程序中，input标签中的数据为单向绑定：

<input
	 type="number"
	 bindinput="inputRealmoney"
	 value="{{ amount }}"
	 placeholder="请输入金额"
/>

如上代码，我们绑定了输入框的数据amount，并绑定了输入事件inputRealmoney。

value属性绑定的是输入框的初始内容。

在这里插入图片描述
如果输入数据，不会绑定到amount中：123是e.detail.value，即输入的数据；500是amount，即value绑定的初始数据。

在这里插入图片描述
解决的方法：在bindinput的事件中设置amount。

注意，用this不要用箭头函数。

function inputRealmoney(e) {
  this.setData({
    //e.detail.value是字符串
    amount: parseInt(e.detail.value)
  })
  if (parseInt(e.detail.value) > enableWithdrawalAmount.value) {
    this.setData({
      amount: enableWithdrawalAmount.value
    })
  }
}