小程序给对象赋值(双向绑定)方法之一

news/2024/12/22 20:12:37/

场景:在我编辑表单的时候,希望将数据同步到最终提交的表单对象数据中,这里用的是vantUI的 van-field 组件

wxml:

<van-field model:value="{{loginParams.username}}" clearable placeholder="输入账号或手机号码" error="{{!loginParams.username}}" left-icon="contact" bind:click-icon="onClickIcon" data-name="username" bind:change="changeForm" /><van-field class="pawd" model:value="{{loginParams.password}}" type="{{paswdType}}" left-icon="lock" error="{{!loginParams.password}}" placeholder="请输入密码" icon="{{seePaswd}}" clearable bind:click-icon="paswdSee" data-name="password" bind:change="changeForm" />

先根据数据名称绑定  data- 属性:

        因为我的用户名叫做username所以给账号就绑定 data-name="username"

        密码跟账号的方法一样

然后再绑定同样的事件: bind:change="changeForm"

JS:

data:{
loginParams:{username:'',password:'',code:''}}///方法:
changeForm(e){//更改表单的方法let curType = e.currentTarget.dataset.name//获取对应的对象名称this.setData({[`loginParams.${curType}`]:e.detail//根据对象名称赋值})}

到这,就成功了

vantui也提供了双向绑定数据的方法,但是那是简单的数据,如果是对象形式的好像就失效了,也许是我的方法不对,欢迎各位同仁指导


http://www.ppmy.cn/news/1525154.html

相关文章

走进低代码表单开发(一):可视化表单数据源设计

在前文&#xff0c;我们已对勤研低代码平台的报表功能做了详细介绍。接下来&#xff0c;让我们深入探究低代码开发中最为常用的表单设计功能。一个完整的应用是由众多表单组合而成的&#xff0c;所以高效的表单设计在开发过程中起着至关重要的作用。让我们一同了解勤研低代码开…

MongoDB延迟查询

在 MongoDB 中&#xff0c;查看副本集成员之间的副本延迟可以通过以下步骤进行&#xff1a; 使用 rs.status() 命令&#xff1a; 这个命令提供了副本集的详细状态信息&#xff0c;包括每个成员的延迟情况。在 MongoDB shell 中&#xff0c;你可以执行以下命令&#xff1a; rs.s…

从搜索热度上看Arcgis的衰退

Arcgis已被qgis快速赶上 google trends是一个google综合了每日的搜索情况的统计网站&#xff0c;可以追踪从2004年开始各个关键字的搜索热度。 我用arcgis和qgis作为对比&#xff0c;简单探索了arcgis和qgis的全球相关热度。 假设&#xff0c;搜索arcgis越高的区域&#xff…

一文教你弄懂网络协议栈以及报文格式

文章目录 OSI七层网络协议栈示意图1. 应用层&#xff08;Application Layer&#xff09;2. 表示层&#xff08;Presentation Layer&#xff09;3. 会话层&#xff08;Session Layer&#xff09;4. 传输层&#xff08;Transport Layer&#xff09;5. 网络层&#xff08;Network …

深入理解全连接层:从线性代数到 PyTorch 中的 nn.Linear 和 nn.Parameter

文章目录 数学概念&#xff08;全连接层&#xff0c;线性层&#xff09;nn.Linear()nn.Parameter()Q1. 为什么 self.weight 的权重矩阵 shape 使用 ( out_features , in_features ) (\text{out\_features}, \text{in\_features}) (out_features,in_features)而不是 ( in_featur…

5款免费版文章生成器,自动生成文章更省创作精力

在自媒体创作中&#xff0c;随着不断的内容输出&#xff0c;让许多创作者都面临着时间和精力的双重压力。而免费版文章生成器的出现&#xff0c;犹如黑暗中的一束光&#xff0c;为创作者们带来了新的希望。免费版文章生成器能够以高效便捷的方式&#xff0c;帮助创作者节省大量…

DevExpress WinForms v24.1新版亮点:功能区、数据编辑器全新升级

DevExpress WinForms拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序&#xff0c;无论是Office风格的界面&#xff0c;还是分析处理大批量的业务数据&#xff0c;它都能轻松胜…

Redis面对数据量庞大处理方法

当Redis面对数据量庞大时&#xff0c;其应对策略需要从多个维度出发&#xff0c;包括数据分片、内存优化、持久化策略、使用集群、硬件升级、数据淘汰策略、合理设计数据结构以及监控系统性能等。以下是对这些策略的详细阐述&#xff0c;以期提供不少于2000字的深入解答。 一、…