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

news/2024/9/17 17:41:19/ 标签: 小程序, apache, 服务器

场景:在我编辑表单的时候,希望将数据同步到最终提交的表单对象数据中,这里用的是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字的深入解答。 一、…

2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码

一、端口说明、域名解析及服务器配置要求 1.1端口说明 使用二级域名映射的情况下 使用端口说明3306数据导入是可以开放 后期关闭 或者直接在服务器上面导入6379不用对外开放9903需要开放80需要开放 1.2 子域名说明&#xff1a; api.xxx.com接口 im.xxx.com通讯 web.xxx.…

[Day 72] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

區塊鏈在跨境支付中的應用 跨境支付一直是全球經濟中極具挑戰的領域。傳統的跨境支付系統通常需要數天時間來處理交易&#xff0c;涉及的中間機構多且手續費昂貴。然而&#xff0c;區塊鏈技術的出現為解決這些問題提供了一條嶄新的途徑。本文將探討區塊鏈在跨境支付中的應用&a…

linux中vim常用命令大全

在Linux系统中&#xff0c;Vim是一款功能强大的文本编辑器&#xff0c;广泛用于代码编写、文档编辑等多种场景。Vim以其高效的编辑能力和丰富的命令集著称。以下是Vim编辑器中常用命令的详细大全&#xff0c;旨在帮助用户更高效地利用Vim进行文本编辑。 一、启动与退出Vim 启动…

JAVA开源项目 校园管理系统 计算机毕业设计

本文项目编号 T 026 &#xff0c;文末自助获取源码 \color{red}{T026&#xff0c;文末自助获取源码} T026&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 管…

Linux杂项知识

Linux的启动过程 Linux 的启动过程大致可以分为以下几个阶段&#xff1a; 1. BIOS/UEFI 加电自检 当计算机加电时&#xff0c;BIOS 或 UEFI 会首先执行一系列的硬件自检&#xff08;POST&#xff0c;Power-On Self Test&#xff09;&#xff0c;检查系统是否正常运行。接下来…

Ansible自动化部署kubernetes集群

机器环境介绍 1.1. 机器信息介绍 IP hostname application CPU Memory 192.168.204.129 k8s-master01 etcd&#xff0c;kube-apiserver&#xff0c;kube-controller-manager&#xff0c;kube-scheduler,kubelet,kube-proxy,containerd 2C 4G 192.168.204.130 k8s-w…

Java小白一文讲清Java中集合相关的知识点(五)

Set接口和常用方法 基本介绍 无序&#xff08;添加和取出的顺序不一样&#xff09;&#xff0c;没有索引不允许重复元素&#xff0c;所以最多包含一个nullJDK API 中Set接口的实现类有&#xff1a; public static void main(String[] args) {//1.以set接口的实现类HashSet来讲…

手机玩机常识-------诺基亚系列机型3/5/6/7/8详细的刷机教程步骤 手机参考救砖刷机教程

诺基亚手机 诺基亚&#xff08;Nokia Corporation&#xff09;&#xff0c;成立于1865年&#xff0c;是一家主要从事移动通信设备生产和相关服务的手机公司 &#xff0c;总部位于芬兰埃斯波 。从1996年开始&#xff0c;诺基亚手机连续15年占据手机市场份额第一位置&…

【测试】——自动化测试入门(Selenium环境搭建)

&#x1f4d6; 前言&#xff1a;本文介绍了自动化测试的基础知识&#xff0c;重点讲解了Selenium环境的搭建。内容包括自动化测试的定义、自动化测试金字塔模型、Selenium的特点和工作原理&#xff0c;以及如何在Java环境中配置和使用Selenium进行UI自动化测试。 目录 &#x1…

性能测试经典案例解析——政务查询系统

各位好&#xff0c;我是 道普云 一站式云测试SaaS平台。一个在软件测试道路上不断折腾十余年的萌新。 欢迎关注我的主页 道普云 文章内容具有一定门槛&#xff0c;建议先赞再收藏慢慢学习&#xff0c;有不懂的问题欢迎私聊我。 希望这篇文章对想提高软件测试水平的你有所帮…

go 语言常见问题(4)

31. go语言编程的好处是什么 编译和运行都很快。在语言层级支持并行操作。有垃圾处理器。内置字符串和 maps。函数是 go 语言的最基本编程单位。 32. 说说go语言的select机制 select 机制用来处理异步 IO 问题select 机制最大的一条限制就是每个 case 语句里必须是一个 IO 操…

【C语言】归并排序递归和非递归——动图演示

目录 一、归并排序思想1.1 基本思想1.2 大体思路 二、实现归并排序&#xff08;递归&#xff09;三、实现归并排序&#xff08;非递归&#xff09;3.1 实现思路&#xff1a;3.2 越界处理3.3 时间复杂度和空间复杂度 总结 一、归并排序思想 1.1 基本思想 归并排序&#xff08;M…