在使用小程序时,跟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. PHP获取汉字首字母函数

    <?php function getFirstCharter($str) { if (empty($str)) { return ''; } $fchar = ord($str{0}); if ...

  2. Beautiful Soup 解析html表格

    from bs4 import BeautifulSoup import urllib.request doc = urllib.request.urlopen('http://www.bkzy.or ...

  3. linux 扩展文件系统

    1. 创建新分区 [root@localhost ~]# fdisk -l Disk /dev/sda: bytes, sectors Units = sectors of * = bytes Sec ...

  4. 从后台拿到echarts的数据值,求出百分比

    从后台拿到数据是一个数组的格式 例: var arr = [6,4,0,0,0,0,0,0]; 后来得到新的需求,需要鼠标移入的时候提示数量和百分比,数量本身就可以拿到, 求百分比的时候:先拿到数组最 ...

  5. 2018-2019-2 网络对抗技术 20165335 Exp4 恶意代码分析

    实验内容: 一.使用schtacks进行系统运行监控,使用sysmon工具监控系统的具体进程,使用各种工具进行监控,并针对软件的启动回连,安装到目标机,以及其他的控制行为的分析,同时,对主机的注册表, ...

  6. 【融云分析】 IM 即时通讯之链路保活

    众所周知,IM 即时通讯是一项对即时性要求非常高的技术,而保障消息即时到达的首要条件就是链路存活.那么在复杂的网络环境和国内安卓手机被深度定制化的条件下,如何保障链路存活呢?本文详解了融云安卓端 SD ...

  7. springboot打成war包找不到文件

    项目在eclipse运行是可以的,但是打成war包到线上报错: FileNotFoundException: class path resource [static/apiclient_cert.p1 ...

  8. vue的三种通信方式

    一 确定组件关系二 使用第一步确定的组件关系在下面找到使用方法 1 父子通信(子组件使用父组件数据渲染) a) 在 子组件 中添加props props: [自定义prop名字] b) 在子组件中把自 ...

  9. 根据字符串导入包使用-----importlib

    import importlibo = importlib.import_module("xx.oo")s2 = "Person"the_class = get ...

  10. UVA11107 Life Forms

    思路 后缀数组 先都拼在一起 二分+height分段 按照小于x的为分界,判断是否有一个分段中包含超过n/2个串 代码 #include <cstdio> #include <cst ...