小程序input数据双向绑定实现方法
作者:KyleBing 时间:2023-07-15 13:09:54
我们都知道 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;
}
}
效果如下图:
来源:https://segmentfault.com/a/1190000020708368
标签:小程序,input,双向绑定
0
投稿
猜你喜欢
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2022-07-30 00:41:42
bootstrap实现二级下拉菜单效果
2024-04-17 10:40:42
Python3.6中Twisted模块安装的问题与解决
2022-05-29 15:45:02
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2024-05-11 09:42:26
python 正则式使用心得
2021-09-17 14:39:49
带你深入了解Access数据库的4种安全方式
2008-11-28 14:34:00
ASP如何跳出本次进入下一次循环
2008-10-23 13:46:00
zabbix进行数据库备份以及表分区的方法
2024-01-16 13:01:46
43个应当避免的Web设计错误
2007-09-30 12:57:00
如何使用json在前后台进行数据传输实例介绍
2024-05-03 15:03:56
mysql中limit的用法深入分析
2024-01-21 17:28:17
详解微信小程序开发之下拉刷新 上拉加载
2024-05-10 13:59:52
WEB2.0网页制作标准教程(2)什么是名字空间
2007-11-13 13:04:00
js判断文件是否为utf-8编码的方法
2024-04-22 13:06:51
Python检测和防御DOS攻击的最简单方法
2022-04-12 17:23:19
Python获取百度热搜的完整代码
2023-09-06 11:33:32
详解Python 多线程 Timer定时器/延迟执行、Event事件
2022-09-04 11:12:52
mysql中格式化数字详解
2024-01-23 16:44:07
Python实现PS图像抽象画风效果的方法
2022-10-25 14:08:42
初步讲解Python中的元组概念
2022-06-03 23:05:55