小程序批量获取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框输入值
随机推荐
- 信用评分卡(A卡/B卡/C卡)的模型简介及开发流程|干货
https://blog.csdn.net/varyall/article/details/81173326 如今在银行.消费金融公司等各种贷款业务机构,普遍使用信用评分,对客户实行打分制,以期对客户 ...
- 福州大学软件工程1916|W班 第5次作业成绩排名
1. 作业链接: https://edu.cnblogs.com/campus/fzu/SoftwareEngineering1916W/homework/2768 2. 评分准则: 本次作业评分分为 ...
- DNS 本质
DNS 本质: 层级分布式数据库
- 保存配置,获取配置,XML
private void SaveSOConfig() { //保存配置 Dictionary<string, string> PrintConfigDIC = new Dictionar ...
- js 字符串的replace() 方法和实现replaceAll() 方法
一.js中字符串的替换使用replace() 方法,但它只替换第一个匹配子串.如下例: <script type="text/javascript"> var sour ...
- android上instant app介绍 类似于微信小程序
android上instant app介绍 类似于微信小程序instant app 是谷歌推出的类似于微信小程序(或者说小程序类似于instant app)的一项技术,用户无须安装应用,用完就走,同时 ...
- GoldenGate HANDLECOLLISIONS参数使用说明
HANDLECOLLISIONS在官方文档上的说明: 使用HANDLECOLLISIONS和NOHANDLECOLLISIONS参数来控制在目标上应用SQL时,Replicat是否尝试解决重复记录和缺 ...
- mySQL简单操作(三)
1.事务 (1)ACID 原子性(不可分割性)automicity 一致性 consistency 隔离性 isolation 持久性 durability (2)事务控制语句 begin/start ...
- jmeter接口/性能压测入门
1.相关知识 https://www.cnblogs.com/star91/p/5059222.html http://www.51testing.com/zhuanti/jmeter.html 测试 ...
- 7步快速解决SQLServer数据库(2008版)重装问题
最近遇到了鼠标双击启动不了数据库的问题,根据事件管理器和自己的最近的使用情况初步判断估计是自己在用360误伤了数据库(哭) 没有办法只好重新安装一下了,参考了网上的一些大神们的教程然后自己实战操作一下 ...