小程序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 动态创建元素的方式介绍及应用
Apr 21 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
js实现select下拉框选择
Jan 11 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
js不常见操作运算符总结
Nov 20 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
星际争霸任务指南——神族
2020/03/04 星际争霸
Php部分常见问题总结
2006/10/09 PHP
PHP ajax 分页类代码
2008/11/13 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
js滚动条回到顶部的代码
2011/12/06 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python中os模块功能与用法详解
2020/02/26 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
Python项目跨域问题解决方案
2020/06/22 Python
python中pow函数用法及功能说明
2020/12/04 Python
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
简单租房协议书
2014/04/09 职场文书
新法人代表任命书
2014/06/06 职场文书
关于保护环境的标语
2014/06/09 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
php 原生分页
2021/04/01 PHP
Python list列表删除元素的4种方法
2021/11/01 Python