小程序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 相关文章推荐
js跨域访问示例(客户端/服务端)
May 19 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
openlayers实现地图弹窗
Sep 25 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP加密解密函数详解
2015/10/28 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
WEEX环境搭建与入门详解
2019/10/16 Javascript
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
python getopt模块使用实例解析
2019/12/18 Python
python em算法的实现
2020/10/03 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
学习党的群众路线对照检查材料
2014/09/29 职场文书
务虚会发言材料
2014/12/25 职场文书
期末个人总结范文
2015/02/13 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
博士论文答辩开场白
2015/06/01 职场文书
元宵节晚会主持词
2015/07/01 职场文书
家属联谊会致辞
2015/07/31 职场文书
办公室日常管理制度
2015/08/04 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js
Go语言怎么使用变长参数函数
2022/07/15 Golang