微信小程序-----input数据双向绑定

简介:

这里介绍两种获取的方式:

1、用户每输入一个字节就获取一个字节

2、用户全部输入结束了之后,再一起获取整个input输入框的值

注意:第二种方式会比较节省内存资源

第一种方式:

原理:我们使用bindinput事件来获取input的输入值,然后根据dataset获取要跟 data数组里的对象进行数据绑定。

wxml:

html 复制代码
<input type="text" value="{{mobile}}" bindinput='adInputChange' placeholder="手机号"/>

js

javascript 复制代码
data: {
    mobile:''
  },  
adInputChange(e){    //e  就是wxml中的value
    this.setData({
      mobile: e.detail.value,
    })

效果图

第二种方式:

相关推荐
阿奇__8 小时前
uniapp h5 app 小程序获取当前定位
小程序·uni-app
2501_9151063211 小时前
iOS性能调优的系统化实践,从架构分层到多工具协同的全流程优化指南(开发者深度版)
android·ios·小程序·架构·uni-app·iphone·webview
李纲明14 小时前
Wordpress如何选择适合外贸的模板主题?
微信小程序·php
一 乐14 小时前
游戏助手|游戏攻略|基于SprinBoot+vue的游戏攻略系统小程序(源码+数据库+文档)
数据库·vue.js·spring boot·后端·游戏·小程序
说私域1 天前
开源AI智能名片链动2+1模式S2B2C商城小程序:分享经济时代的技术赋能与模式创新
人工智能·小程序·开源
一人一程温一壶酒1 天前
微信小程序uniapp开发附源码——图片加水印
微信小程序·uni-app·notepad++
低代码布道师1 天前
医疗小程序05我的就诊卡
低代码·小程序
阿拉斯加的头头儿1 天前
小程序下载图片问题处理
小程序
一 乐1 天前
校园墙|校园社区|基于Java+vue的校园墙小程序系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端·小程序
vx_bscxy3221 天前
告别毕设焦虑!Python 爬虫 + Java 系统 + 数据大屏,含详细开发文档 基于微信小程序的民宿预约系统22398 (上万套实战教程,赠送源码)
java·spring boot·mysql·微信小程序·课程设计