小程序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,双向绑定
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
sql 查询记录数结果集某个区间内记录
2023-07-09 08:25:01
ASP实现最简洁的多重查询的解决方案
2007-09-28 12:00:00
SQL文本字段的数字排序问题
2008-11-18 16:47:00
![](https://img.aspxhome.com/file/UploadPic/200811/18/o200852912144-57s.jpg)
PHP 数组和字符串互相转换实现方法
2023-06-19 15:04:17
如何把小写数字转换成英文?
2009-11-06 13:59:00
Dreamweaver MX 2004 试用心得
2010-03-25 12:21:00
![](https://img.aspxhome.com/file/UploadPic/20071/200713110316860s.gif)
[原创][分享]数字格式化转换
2011-07-04 12:20:15
AJAX请求类下载
2007-08-23 08:33:00
asp的系统变量ServerVariables (“HTTP_USER_AGENT“)问题
2009-02-04 15:51:00
SQL Server视图管理中的四个限制条件
2009-03-06 14:24:00
微软建议的ASP性能优化28条守则(3)
2008-02-24 16:30:00
QQ影音感念亲恩皮肤,不只是大按钮这么简单
2009-01-04 14:16:00
![](https://img.aspxhome.com/file/UploadPic/20091/4/0812_qqplayer_bigbutton_01-96s.jpg)
JavaScript文档生成工具
2007-10-26 11:59:00
这么多的 Oracle 性能工具
2008-06-04 11:20:00
ASP使用fso遍历文件及文件夹列出文件名
2008-10-27 19:32:00
Access命令行参数
2007-08-23 15:35:00
position、z-index、top、right、bottom和left属性
2009-10-04 20:33:00
整理及优化CSS代码的七个原则[译]
2009-04-23 12:35:00
![](https://img.aspxhome.com/file/UploadPic/20094/23/01-21s.gif)
{ hide_text } CSS文字隐藏总结报告
2010-06-13 17:19:00
![](https://img.aspxhome.com/file/UploadPic/20106/13/01-30s.jpg)
jquery AJAX 三个发送状态 posting, error, success
2010-07-31 18:59:00