小程序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 相关文章推荐
通过JavaScript控制字体大小的代码
Oct 04 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
JQuery学习总结【二】
Dec 01 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
巴西网上药房:onofre
2016/11/21 全球购物
初中生学习的自我评价
2013/11/14 职场文书
资料员岗位职责
2013/11/17 职场文书
二人合伙经营协议书
2014/09/13 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
趣味运动会赞词
2015/07/22 职场文书
小学班主任研修日志
2015/11/13 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
Oracle使用别名的好处
2022/04/19 Oracle
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技