小程序批量获取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框输入值
随机推荐
- centos7 源码安装php7
因为php安装需要编译,所以服务器应该保证gcc和g++环境的安装 1. 首先释放安装包: tar -xvzf php-7.0.5.tar.gz cd php-7.0.5 2. 接下来进行参数配置,配 ...
- what?iView的DropDown没有element的split-button?提issure?等不及了,自己实现一个
开始正文之前,有必要先说自己实现这个组件的必要性描述. 话说大家做表格时,增删查改按钮都是放在哪里的?最简单的方式应该是这样: 是不是感觉奇丑无比啊,于是改成了这样: 但是这种操作按钮一多后就没位置放 ...
- /var/log各种日志
文章为装载 1)/var/log/secure:记录登录系统存取数据的文件;例如:pop3,ssh,telnet,ftp等都会记录在此. 2)/ar/log/btmp:记录登录这的信息记录,被编码过, ...
- 使用 lsyncd 同步文件
https://unix.stackexchange.com/questions/307046/real-time-file-synchronization https://github.com/ax ...
- TeamCity 创建jar构建步骤
1 创建工程 2 配置工程代码来源信息 2.1 From a repository URL 表示从代码仓库创建工程. 2.1.1 parent project 指定父工程,默认是root projec ...
- python基础_格式化输出(%用法和format用法)
目录 %用法 format用法 %用法 1.整数的输出 %o —— oct 八进制%d —— dec 十进制%x —— hex 十六进制 1 >>> print('%o' % 2 ...
- bzoj 3473 字符串 - 后缀数组 - 树状数组
题目传送门 传送门 题目大意 给定n个字符串,询问每个字符串有多少子串(不包括空串)是所有n个字符串中至少k个字符串的子串 先用奇怪的字符把所有字符串连接起来. 建后缀树,数每个节点的子树内包含多少属 ...
- 浅谈Tarjan算法
从这里开始 预备知识 两个数组 Tarjan 算法的应用 求割点和割边 求点-双连通分量 求边-双连通分量 求强连通分量 预备知识 设无向图$G_{0} = (V_{0}, E_{0})$,其中$V_ ...
- windows下安装git和vundle
git在windows下的版本是: git-for-windows, 或者说是: msysgit: ms-sys-git 直接在 https://gitforwindows.org/上下载 git对w ...
- zabbix历史数据相关表研究
zabbix历史数据相关表研究 history和trends相关表 history和trends都是存储历史数据的地方.一般是通过监控项(item)配置里.匹配更新监控项(item)和设置HouseK ...