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

news2024/10/7 9:19:19

小程序中,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.coloradmin.cn/o/463701.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端后端实现防盗链

防盗链&#xff08;Referer Header&#xff09;是指在网页中嵌入的外部资源&#xff08;如图片、音视频等&#xff09;被非法使用或盗链的现象。为了避免这种情况的发生&#xff0c;我们可以通过前端和后端技术来防止盗链。 前端防盗链 前端防盗链可以通过在页面中添加 JavaSc…

在f1tenth仿真中如何实现更快速的跑圈-曲线分析篇

本文使用蓝桥云课&#xff0c;即开即用&#xff0c;如果配置第三方课程资源&#xff0c;通常也在10分钟内完成。 效果如下&#xff1a; 全部参考资料如下&#xff1a; 蓝桥ROS之f1tenth案例学习与调试&#xff08;失败&#xff09; 蓝桥ROS之f1tenth案例学习与调试&#xff…

Maven 三种archetype说明合集

Maven 三种archetype说明合集【转载】_maven-archetype-quickstart_太阳神LoveU的博客-CSDN博客 新建Maven project项目时&#xff0c;需要选择archetype。 那么&#xff0c;什么是archetype&#xff1f; archetype的意思就是模板原型的意思&#xff0c;原型是一个Maven项目模…

【ant-design-vue】树形表格数据,实现父子关联选择

ant-design-vue 版本1.7.8 ,2.2.8 这两个版本都是不支持树形表格数据&#xff0c;实现父子关联选择 只能自己写方法来实现父子关联选择 <template><a-card><a-table :columns"columnsA" :data-source"tabData" :customRow"tableClic…

Redis数据库和SpringBoot的故事|这一篇就够了(超详细)

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;老茶icon &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开兴好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;计…

路由功能开启

开启路由 转发&#xff0c;为当前实验环境提供路由功能 RouterSrv 1.安装路由和远程访问 选中 路由 和 DirectAccess 和 VPN 2.配置 启用 路由功能 工具 ---- 路由和远程访问----右键 配置启用路由和远程访问 3.测试 找两个在不同网段的 服务端 是否能ping通

基于趋动云部署复旦大学MOSS大模型

首先新建项目&#xff1a; MOSS部署项目&#xff0c;然后选择镜像&#xff0c;直接用官方的镜像就可以。 之后选择数据集&#xff1a; 公开数据集中&#xff0c;MOSS_复旦大学_superx 这个数据集就是了&#xff0c;大小31G多 完成选择后&#xff1a; 点击创建&#xff0c;…

【c语言】enum枚举类型的定义格式 | 基本用法

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ…

Nuxt3从零到发布

官网地址&#xff1a;Nuxt3 一&#xff1a;创建项目 Node.js -或更新版本v16.10.0 npx nuxi init nuxt-app 如果出现下面错误&#xff0c;请修改DNS为114.114,114,114 创建完成后在 Visual Studio Code 中打开项目文件夹&#xff1a; 二&#xff1a;安装依赖 npm install …

Newegg 新蛋供应链管理良策——EDI

美国新蛋网Newegg平台于2001年在美国洛杉矶创立&#xff0c;服务版图遍及全球52国&#xff0c;全球员工 2200人以上&#xff0c;用户总数达3600万、每月访客数达1700万&#xff0c;持续赢得广大网购用户喜爱&#xff0c;被Forbes与Computer Shopper等多家权威媒体评选为最佳购物…

类的几种实例化方法 new clone 反射 序列化 反序列化

目录 ①用类的new &#xff08;&#xff09;创建 ②用clone方法创建&#xff0c; 需要类实现 Cloneable 接口 ③通过反射机制创建 ④将一个对象实例化后&#xff0c;进行序列化&#xff0c;再反序列化 ①用类的new &#xff08;&#xff09;创建 User user new User(); ②…

如何从身份证号中提取年月日

怎样根据身份证号提取出生日期呢&#xff1f; 下面是一些数据&#xff0c;B列是身份证号&#xff0c;需要把出生日期提取到C列 方法1&#xff1a;技巧法&#xff08;数据-->分列&#xff09; 选中身份证号所在的列&#xff0c;单击菜单栏中的【数据】-->【分列】&#…

H.264/AVC加密----选择加密

文献学习&#xff1a; 《Data Hiding in Encrypted H.264/AVC Video Streams by Codeword Substitution》 期刊&#xff1a;IEEE TRANSACTIONS ON INFORMATION FORENSICS AND SECURITY 简介 通过分析H.264/AVC编解码器的特性&#xff0c;提出了三个敏感部分(IPM、MVD和残差系…

基于深度学习mediapipe的人脸打码人脸模糊教程pyqt5界面附源码

一、人脸识别 人脸识别是一门比较成熟的技术。 它的身影随处可见&#xff0c;刷脸支付&#xff0c;信息审核&#xff0c;监控搜索&#xff0c;人脸打码等。 更多的时候&#xff0c;它是方便了我们的生活&#xff0c;足不出户&#xff0c;就可以实现各种 APP 的实名认证&…

格式化数据恢复怎么做?超实用的3种方法在这!

案例&#xff1a;格式化数据怎么恢复 【我的电脑前段时间中病毒了&#xff0c;无奈之下我只能将其格式化&#xff0c;但是很多重要的文件和图片之类的也一起被删除了&#xff0c;有什么方法可以恢复这些格式化的数据吗&#xff1f;非常着急&#xff01;】 格式化数据恢复&…

1390:食物链【NOI2001】

1390&#xff1a;食物链【NOI2001】 时间限制: 1000 ms 内存限制: 65536 KB 【题目描述】 动物王国中有三类动物A,B,C&#xff0c;这三类动物的食物链构成了有趣的环形。A吃B&#xff0c; B吃C&#xff0c;C吃A。 现有N个动物&#xff0c;以1&#xff0d;N编号。每个动…

安全常见基础名词概念

一、域名 1、域名&#xff1a;相当网站的名字&#xff0c;互联网上某一台计算机或计算机组的名称&#xff0c;用于在数据传输时标识计算机的电子方位。 2、网域名系统&#xff08;Domain Name System&#xff09;有时也简称为域名&#xff08;DNS&#xff09;&#xff0c;是互…

Sametime 12.0.1 FP1发布以及Notes中的SwiftFile使用

大家好&#xff0c;才是真的好。 上周&#xff0c;HCL推出了Sametime 12.0.1FP1FP1更新包程序&#xff0c;包含不少新功能以及很多修复程序。虽然Sametime组件现在不需要运行在Domino服务器上&#xff0c;但毕竟Sametime通常会使用Domino目录或Domino中的LDAP目录服务&#xf…

陆奇最新演讲高清PPT下载;AI 绘画20+工具体验汇总;我愿称MOSS为全球开源界最强;思否AIGC黑客马拉松北京站 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f916; 『陆奇罕见公开演讲「新范式 新时代 新机会」』高清PPT和视频可直接下载 ShowMeAI知识星球资料编号&#xff1a;R054 奇绩创坛创始人兼…

ChatGPT实现命名实体识别(NER, named entity recognization)和词性归类

语义分析词格分类 命名实体识别(NER, named entity recognization)和词性归类是 NLP 技术中的关键一环。过去 NLP 领域有不少流行的开源项目专注在这个领域&#xff0c;如 Spacy、NLTK 等等。我们来试试 ChatGPT 在这方面的表现情况如何。我们从"四渡赤水"的百度百科…