小程序input数据双向绑定实现方法


Posted in Javascript onOctober 17, 2019

我们都知道 vue 中可以使用 modal 来实现 input 内容数据的双向绑定。

小程序好像没有提供相应的方法支持,就需要我们自己写了。

原理

很简单,在 input 上先绑定需要取值的变量,如这个变量名是 name,然后再定义一个用于指向变量名的属性 data-modal 这个属性值设置为 name,在 input 的绑定方法中将这个属性值取出,就会知道这个 input 绑定了哪个变量,然后再将 input 的当前值赋给这个变量即可。

实现

wxml

<input id='name' 
  name="name"
  type='text' 
  value='{{name}}' <!-- input 从 js 中的 data.name 取值 -->
  data-modal='name' <!-- 这里通过 data-xx 的形式传递一个需要绑定的变量名,之后可以通过 event.dataset.xxx 轻松取到 -->
  bindinput='handleInputChange' <!-- 这里绑定 input 内容变化时的处理方法 -->
  >
</input>

wxs

Page({
 data: {
  name: String
 },
 handleInputChange: function(e){
   // 取出定义的变量名
  let targetData = e.currentTarget.dataset.modal; 

  // 取出定义的变量名
  let currentValue = e.detail.value; 
  
  // 将 input 值赋值给 定义的变量名,this.name 可以直接取到在 data 中定义的 name 值,其效果跟 this[变量名] 是对等的,这是 js 基础
  this[targetData] = currentValue; 
  
 }
}

效果如下图:

小程序input数据双向绑定实现方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
jQuery拖动图片删除示例
May 10 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
javascript模拟命名空间
Apr 17 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 #Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 #Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 #Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 #Javascript
浅谈Vue.set实际上是什么
Oct 17 #Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 #Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 #Javascript
You might like
论坛头像随机变换代码
2006/10/09 PHP
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
python求列表交集的方法汇总
2014/11/10 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
Python进程池Pool应用实例分析
2019/11/27 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
销售工作岗位职责
2013/12/24 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
五年级学生评语
2014/04/22 职场文书
审计班子对照检查材料
2014/08/27 职场文书
介绍信怎么写
2015/01/30 职场文书
陪护人员误工证明
2015/06/24 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python