小程序批量获取input的输入值,监听输入框,数据同步
在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听。
但是我们如果有多个表单时,需要写多个事件来同步数据。这样做很麻烦。下面的方法可以解决,只需要一个方法即可。
代码直接上了:
wxml:
<view class='form'>
<view class='item_box'>
<input class="input" bindinput='inputWacth' data-model="phone" type="number" maxlength="11" placeholder="请输入手机号码" />
<button class='yzm_btn' plain size='mini'>获取验证码</button>
</view>
<view class='item_box'>
<input class="input" bindinput='inputWacth' data-model='yzm' type="text" maxlength="6" confirm-type="done" placeholder="请输入验证码"/>
</view>
<button style='margin-top:60rpx;' type='primary' bindtap='login'>登录</button>
</view>
js:
data: {
phone:'',
yzm:''
},
// 输入监听
inputWacth:function(e){
console.log(e);
let item = e.currentTarget.dataset.model;
this.setData({
[item]: e.detail.value
});
}
这样只需要一个方法即可解决所有输入框数据同步。效果如下:


小程序批量获取input的输入值,监听输入框,数据同步的更多相关文章
- 即时搜索或input实时检测监听输入框变化
js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导 ...
- 微信小程序 --- 动态获取input的value
这里对 input 使用的是 bindinput 方法: <input type="text" bindinput="input"> <but ...
- 小程序:获取input输入的值
wxml <input placeholder='输入你的姓名' value='{{name}}' bindblur='nameblur'></input> js data ...
- 基于 Aliexpress API 的小程序 : 批量 Copy 产品到不同的店铺
第一个基于 Aliexpress API 的小程序 : 批量 Copy 产品到不同的店铺 还没来得及用 API 重写软件, 先写个小程序来缓解一下手工压力: 批量Copy 产品到不同的店铺. 开网店 ...
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
- 小程序如何获取code
小程序如何获取code <button open-type="getUserInfo" hover-class='none' bindgetuserinfo="ge ...
- 微信小程序验证码获取倒计时
wxml <button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button> js ...
- 微信小程序批量上传图片 All In One
微信小程序批量上传图片 All In One open-data https://developers.weixin.qq.com/miniprogram/dev/component/open-dat ...
- js通過name获取input框输入值
var account = $("input[name='account']").val();//获取input框输入值
随机推荐
- vue知识总结
vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...
- JD-GUI反编译出现ERROR
反编译Jar包一般使用JD-GUI工具,很方便.但有时会出现异常,如下: 此时,可以辅助使用另一个工具来反编译代码:Luyten(https://github.com/deathmarine/Luyt ...
- Ubuntu 安装第三方工具
1. pycharm 安装(链接:https://pan.baidu.com/s/1fIp-AhBmnPvqYW40140RLw 提取码:ukkv ) 1.运行以下命令安装 sh pycha ...
- 浏览器对象模型BOM总结
BOMwindows对象document对象location对象screen对象 Windows对象 1.窗口操作 移动指定的距离:window.moveBy(10,20); //向右移动10像素,向 ...
- tab切换的效果——仿照今日头条APP的切换效果
说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...
- 关于BDD100k数据输入处理mask变为56*56
Mask_rcnn数据训练 Mask rcnn往里面送的是数据原图,可能没有把mask送里面,而且mask的数据 56*56,仿照coco——inspect_data重点考虑 Bounding box ...
- MySQL触发器在建立时,报语法错的问题
delimiter $$ create trigger trg_delete_on_users before DELETE on users for each row begin delete fro ...
- ORACLE 12c RAC的常用管理命令
ORACLE 12c RAC的常用管理命令 一.查询 1.RAC查询 1.1.查询节点 [grid@swnode1 ~]$ su - grid [grid@swnode1 ~]$ /u01/app/1 ...
- mfc双缓冲绘图
1.要求 在界面加载本地图片并显示,每过100ms改变一张图片显示 2.现象 通过定时器控制CImage,Load,Draw,Destroy,会非常的卡顿.因为Load图片时,会是非常大的数据[所有C ...
- mpvue小程序开发tips(1)
wx.setStorageSync('vipId',vipId)-----存储 wx.getStorageSync('vipId')-------读取 wx.navigateTo({ url: ...