小程序input数据双向绑定实现方法
更新时间：2019年10月17日 10:19:32 作者：KyleBing
这篇文章主要介绍了小程序input数据双向绑定实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
我们都知道 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;
}
}
效果如下图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
写入cookie的JavaScript代码库 cookieLibrary.js
cookieLibrary.js 写入cookie的JavaScript代码库,需要的朋友可以参考下。2009-10-10
这篇文章主要为大家详细介绍了JavaScript实现网页版贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
非常不错的功能，当单机一个链接时，会弹出确认对话框效果2008-09-09
这篇文章主要介绍了JavaScript保存并运算页面中数字类型变量的写法,当你在页面中需要不停运算一个数字变量时非常有用,普通的写法不能正常运算,使用本文方法就可以,需要的朋友可以参考下2015-07-07
Foo.getName算是一道比较老的面试题了,大致百度了一下在17年就有相关文章在介绍它,下面这篇文章主要给大家介绍了关于一道超经典js面试题Foo.getName()的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要给大家介绍了关于如何通过JavaScript读取元素的样式,文中通过实例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
下面小编就为大家带来一篇js实现页面跳转的几种方法小结。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-05
javascript简化代码 A=alert w=document.writeln
建议不要这样写代码,考虑以后的修改才是最重要的,代码分层.多把一个功能写成一个js代码或一个类,然后提供接口,这种写法代码会更多,速度也更慢,但人人都推荐这样写,是因为这样子维护方便.而程序不可能一次性写得完美的,永远都可以改进2008-02-02
这是一个非常重要的知识点了，了解了JavaScript的作用域链的话，能帮助我们理解很多‘异常’问题。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
Javascript代码混淆综合解决方案-Javascript在线混淆器
Javascript代码混淆综合解决方案-Javascript在线混淆器...2006-12-12
最新评论