当前位置: 首页 > article >正文

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

场景:在我编辑表单的时候,希望将数据同步到最终提交的表单对象数据中,这里用的是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.kler.cn/a/303347.html

相关文章:

  • llama factory lora 微调 qwen2.5 7B Instruct模型
  • Spring Cloud Gateway(分发请求)
  • 985研一学习日记 - 2024.11.14
  • Servlet入门 Servlet生命周期 Servlet体系结构
  • Linux网络——网络初识
  • 成都睿明智科技有限公司解锁抖音电商新玩法
  • 企业客户|基于springboot的企业客户管理系统设计与实现(附项目源码+论文+数据库)
  • 一次开发,多端部署--实例二
  • RK3568 android11 usb摄像头预览分辨率添加多分辨率---解除1080p限制
  • 实现绑定UDP端口的Server程序
  • 大模型微调 - 基于预训练大语言模型的对话生成任务 训练代码
  • 计算机二级自学笔记(选择题1部分)
  • git的快速合并fast-forward merge详解
  • 机器学习和深度学习存在显著区别
  • LeetCode 热题 100 回顾11
  • 【系统架构设计师】ATAM(Architecture Tradeoff Analysis Method)
  • 【免费刷题】实验室安全第一知识题库分享
  • 简单了解深度学习
  • postcss-pxtorem实现页面自适应
  • python爬虫--实用又便捷的第三方模块--requests实战
  • 架构师知识梳理(七):软件工程-测试
  • 【智路】智路OS Perception Pipeline
  • 文件批量添加水印和密码合并单元格完整版
  • Python基础语法(2)
  • 【运维监控】Prometheus+grafana监控spring boot 3运行情况
  • 实现快速产出的短视频剪辑工具