在使用小程序时,跟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. Elasticsearch从入门到精通之Elasticsearch集群内的原理

    上一章节我介绍了Elasticsearch安装与运行,本章节及后续章节将全方位介绍 Elasticsearch 的工作原理 在这个章节中,我将会再进一步介绍 cluster . node . shar ...

  2. SQL count(1)

    If you are ever unsure what to put inside a COUNT() aggregation, you can do COUNT(1) to count the ro ...

  3. Scala字节数组转换为数字

    1. 2个字节数组转换为整数 def bytes2uint8(_bytes: Array[Byte], _offset: Int): Int = { val b0 = _bytes(_offset) ...

  4. PKCS RSA执行标准

    RSA是一种算法,但是,在相关应用的时候,还是需要有一些标准的.这就是pkcs.现在的各种程序中,基本都是遵循这个标准来使用RSA的.最近陆续读取RSA相关的内容进行学习. RSA官网:https:/ ...

  5. angular4 使用swiper 首次加载问题(一)

    angular 在使用外部插件swiper 还是有不少小坑的,下面来聊一聊.angular在使用swiper 的一些坑 一开始觉得使用外部引入的方式比较好,就在外部定义了.简单快捷方便, 但是在开发后 ...

  6. C#winform窗体利用系统抓取关闭按钮事件

    const int WM_SYSCOMMAND = 0x112;        const int SC_CLOSE = 0xF060;        const int SC_MINIMIZE = ...

  7. ABP入门系列之2——ABP模板项目

    进入官网下载模板项目 依次按下图选择: 输入验证码开始下载 下载提示: 二.启动项目 使用VS2017打开项目,还原Nuget包: 设置以Web结尾的项目,设置为启动项目: 打开Web.config, ...

  8. C#匿名类型和动态解析减少定义传输类模板

    C#作为强类型语言,在序列化和反序列化(json)场景中对字符串解析常常需要定义强类型模板,造成编码上的繁琐.其实可以使用匿名类型和动态解析减少json序列化时候的数据模板定义: string a = ...

  9. pytest使用简介

    pytest是基于py unittest的一个单元测试框架,用起来比unittest简单不少,不过和unittest使用不太一样,总结如下: 格式: case的py文件名必须是test开头 def用例 ...

  10. linux 启动流程

    启动第一步--加载BIOS 当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的重要,以至于计算机必须在最开始就找到它.这是因为BIOS中包含了CPU的相关信息.设备启动顺序信息.硬 ...