在使用小程序时,跟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的输入值,监听输入框,数据同步的更多相关文章

  1. 即时搜索或input实时检测监听输入框变化

    js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导 ...

  2. 微信小程序 --- 动态获取input的value

    这里对 input 使用的是 bindinput 方法: <input type="text" bindinput="input"> <but ...

  3. 小程序:获取input输入的值

    wxml <input placeholder='输入你的姓名' value='{{name}}' bindblur='nameblur'></input>   js data ...

  4. 基于 Aliexpress API 的小程序 : 批量 Copy 产品到不同的店铺

    第一个基于 Aliexpress API 的小程序 : 批量 Copy 产品到不同的店铺 还没来得及用 API 重写软件, 先写个小程序来缓解一下手工压力: 批量Copy 产品到不同的店铺. 开网店 ...

  5. 微信小程序基础之input输入框控件

    今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...

  6. 小程序如何获取code

    小程序如何获取code <button open-type="getUserInfo" hover-class='none' bindgetuserinfo="ge ...

  7. 微信小程序验证码获取倒计时

    wxml <button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button> js ...

  8. 微信小程序批量上传图片 All In One

    微信小程序批量上传图片 All In One open-data https://developers.weixin.qq.com/miniprogram/dev/component/open-dat ...

  9. js通過name获取input框输入值

    var account = $("input[name='account']").val();//获取input框输入值

随机推荐

  1. 论文阅读(Weilin Huang——【ECCV2016】Detecting Text in Natural Image with Connectionist Text Proposal Network)

    Weilin Huang——[ECCV2016]Detecting Text in Natural Image with Connectionist Text Proposal Network 目录 ...

  2. LapSRN

    Deep Laplacian Pyramid Networks for Fast and Accurate Super-Resolution 解决问题: 1.bicubic预处理上下采样,计算复杂度高 ...

  3. 网易blog服务器关闭了,我曾经的大部分博文迁移至此,留作纪念。欢迎大家去我的简书blog~

    ARM时代过去了,另一个AI时代正在上演~ 这一次我看上了计算机视觉,一个依旧在发展,论文数量不断上升的技术领域,还有很多待研究的技术突破点,我可以玩的时间长一点了. 活到老,学到了.学以致用乐趣无穷 ...

  4. PAT (Basic Level) Practice (中文)1006 换个格式输出整数 (15 分)

    题目链接:https://pintia.cn/problem-sets/994805260223102976/problems/994805318855278592 #include <iost ...

  5. 系统管理--配置Gitlab

    很多教程都有配这个,但这个又不能用于”源码管理”模块拉取代码,我一直很困惑这个配置有什么用,然后就找到了该插件的github项目地址才弄明白,链接:https://github.com/jenkins ...

  6. P4177 [CEOI2008]order(网络流)最大权闭合子图

    P4177 [CEOI2008]order 如果不能租机器,这就是最大权闭合子图的题: 给定每个点的$val$,并给出限制条件:如果取点$x$,那么必须取$y_1,y_2,y_3......$,满足$ ...

  7. 组装一台PRUSA I3打印机

    闲来无事,又搞了台机.这样下去顶不住了.草. 还是咸鱼购买,但是这台收到的时候比我以前任何一台都要散,几乎重新装了一台. 此处省略收到货时候的零件图,省略装机图. 不得不提的是,原机用的山寨melzi ...

  8. IDEA 创建 web项目

    创建web步骤: 1.创建一个project File -> New Project -> 选择Java,Project SDK为1.7,勾选Web Application(创建web.x ...

  9. HTML有哪些标签?html常用标签大全

    html中标签有很多,每一种标签都有着不同的用处,下面这篇文章php中文网给大家总结html常用的标签,每一种标签都会跟随一个例子,话不多说,让我们来看看具体内容.<font>字体标签,用 ...

  10. scrapy 爬虫的暂停与重启

    暂停爬虫项目 首先在项目目录下创建一个文件夹用来存放暂停爬虫时的待处理请求url以及其他的信息.(文件夹名称:job_info) 在启动爬虫项目时候用pycharm自带的终端启动输入下面的命令: sc ...