小程序批量获取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框输入值
随机推荐
- redis 在 php 中的应用(Sorted-set篇)
本文为我阅读了 redis参考手册 之后编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) Redis 有序集合和集合一样也是string类型元素的集合,且不 ...
- html2canvas截屏用法
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...
- 第01节:ActiveMQ入门和消息中间件
1.ActiveMQ最主要的功能:实现JMS Provider,用来帮助实现高可用.高性能.可伸缩.易用和安全的企业级面向消息服务的系统.是一个异步的功能. 2.ActiveMQ特点: 完全支持JMS ...
- war包安装jenkins
转自:https://blog.51cto.com/bigboss/2129358 系统环境: CentOS 7.5 1804 IP:192.168.1.3 关闭selinux.firewalld j ...
- Unity 个人用过的地面检测方案总结
Unity 个人用过的地面检测方案总结 1.普通射线 在角色坐标(一般是脚底),发射一根向下的射线,长度大约为0.2, 只适用于简单地形,实际使用中常常遇到以下问题 用的collider去碰撞地面时, ...
- 1.2:Properties
文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 上一节我们了解了一个Shader的基本结构,这一节,我们从 Propert ...
- kubernets 概念
理解 Kubernetes 对象 各种资源对象的理解和定义 Kubernetes 中 Pod 的选举过程
- 尝试解决IDea 启动项目后,后台疯狂输出日志。
今天启动项目的时候,昨天下班前还好好,然后今天就炸了.后台疯狂输出日志.. 就类似这种,大批量的刷.其实项目已经正常启动了,就是疯狂的刷日志. 2019-03-29 08:42:53 [DEBUG] ...
- 解析JavaScript中的sort()排序方法以及原理
Array.sort()方法将数组中的元素进行排序,返回排序后的数组,默认是按照升序排序的.sort方法会调用数组中每一项的toString()方法,然后按照ascii编码进行排序,如果数组含有und ...
- linux下的缓存机制及清理buffer/cache/swap的方法梳理 (转)
一.缓存机制介绍 在Linux系统中,为了提高文件系统性能,内核利用一部分物理内存分配出缓冲区,用于缓存系统操作和数据文件,当内核收到读写的请求时,内核先去缓存区找是否有请求的数据,有就直接返回,如果 ...