微信小程序-----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,
    })

效果图

第二种方式:

相关推荐
郭wes代码11 小时前
Cmd命令大全(万字详细版)
python·算法·小程序
.生产的驴16 小时前
SpringBoot 对接第三方登录 手机号登录 手机号验证 微信小程序登录 结合Redis SaToken
java·spring boot·redis·后端·缓存·微信小程序·maven
汤姆yu21 小时前
基于微信小程序的乡村旅游系统
微信小程序·旅游·乡村旅游
计算机徐师兄1 天前
基于TP5框架的家具购物小程序的设计与实现【附源码、文档】
小程序·php·家具购物小程序·家具购物微信小程序·家具购物
曲辒净1 天前
微信小程序实现二维码海报保存分享功能
微信小程序·小程序
朽木成才1 天前
小程序快速实现大模型聊天机器人
小程序·机器人
peachSoda71 天前
随手记:小程序使用uni.createVideoContext视频无法触发播放
小程序
何极光1 天前
uniapp小程序样式穿透
前端·小程序·uni-app
小墨&晓末1 天前
【PythonGui实战】自动摇号小程序
python·算法·小程序·系统安全
oil欧哟2 天前
🤔认真投入一个月做的小程序,能做成什么样子?有人用吗?
前端·vue.js·微信小程序