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

news/2024/7/20 4:12:46 标签: 小程序, 微信小程序

小程序中,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
    })
  }
}

注意,赋值语句也可以:

amount.value=parseInt(e.detail.value)

参考

微信小程序双向数据绑定_微信小程序双向绑定_常鸣鸣的博客-CSDN博客

微信小程序,input输入内容双向绑定 - 腾讯云开发者社区-腾讯云 (tencent.com)

小程序input实现数据双向绑定 - 简书 (jianshu.com)


http://www.niftyadmin.cn/n/264868.html

相关文章

python安装三方库教程:关于pip命令的一切,到底怎么用?

python安装三方库教程&#xff1a;关于pip命令的一切&#xff0c;到底怎么用&#xff1f; 一、pip设置国内源&#xff1a;1.1如何本地配置源&#xff1a;1.1.1 方法1&#xff1a;下载的时候指定地址1.1.2 方法2&#xff1a;使用pip命令生成配置文件1.1.3 方法3&#xff1a;自定…

国内各大买家验厂干货知识

【国内各大买家验厂干货知识】 中国企业要与国际大买家合作&#xff0c;其中很重要的就是要通过国际买家的验厂&#xff0c;特别是劳动密集型的企业&#xff0c;劳工的待遇、工作环境以及环保情况都是欧美买家验厂时所关注的。而中国买家关注的是那些方面呢&#xff1f;又有哪些…

Markdown常用数学公式

1 行内公式 在两个美元符号中输入公式即可。 如$Em\times c^2$ 效果&#xff1a; E m c 2 Em\times c^2 Emc2&#xff08;注&#xff1a;\times是乘的意思&#xff09; 2 整行公式 在四个美元符号中输入公式&#xff0c;如果想要给公式后面添加编号&#xff0c;那么在公式…

1166: 6102玛雅历法

题目描述 上周末&#xff0c;M.A. 教授对古老的玛雅有了一个重大发现。从一个古老的节绳&#xff08;玛雅人用于记事的工具&#xff09;中&#xff0c;教授发现玛雅人使用了一个一年有365天的叫做Haab的日历。这个Haab 日历拥有19个月&#xff0c;在开始的18个月&#xff0c;一…

【IT 常识】安装(Install)、部署(Deploy)、搭建(Setup)和配置(Configure、Set)的区别

文章目录 前言安装、部署与搭建Install vs. Setup/Set upInstall vs. DeploySetup/Set up vs. Deploy 设置与配置Set vs. ConfigureSetting vs. Configuration vs. Option 前言 在平时工作中&#xff0c;我们并没有严格区分 安装&#xff08;Install&#xff09;、部署&#x…

活动文章测试(勿删)

大家好&#xff01; 我是CSDN官方博客&#xff01; 恭喜你正式加入CSDN博客&#xff0c;迈上技术成神之路~~ 路漫漫其修远兮——身为技术人&#xff0c;求索之路道阻且艰&#xff0c;但一万次的翘首却比不过一次的前行。 现在&#xff0c;就来开启你的个人博客&#xff0c;发布…

Matlab 最远点采样(FPS,二维版本)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 简而言之,该方法是通过迭代、增量的方式来选择距离前一个点集最远的点从而实现数据的采样过程。其算法步骤如下所述: (1)从点集 S S S中随机选择一个点

ArcGIS Pro、R、INVEST等多技术融合下生态系统服务权衡与协同动态分析

第一章、生态系统服务讲解 1.生态系统服务概念和基本理论 ​ 2.生态系统服务评估方法与模型讲解 ​ ​ 3.生态系统服务权衡与协同研究方法与意义 ​ 4.文献可视化分析 ​ ​ 第二章、平台基础 一、ArcGIS Pro介绍1. ArcGIS Pro简介2. ArcGIS Pro基础3. ArcGIS Pro数据预处理4. …