小程序input数据双向绑定实现方法
作者：KyleBing 发布时间：2023-07-15 13:09:54
标签：小程序,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;
}
}
效果如下图：
来源：https://segmentfault.com/a/1190000020708368
0
投稿猜你喜欢
- 1.要求数据库存储通讯录，要求按姓名/电话号码查询，查询条件只有一个输入入口，自动识别输入的是姓名还是号码，允许模糊查询。2.实现功能可通过
- 解包在英文里叫做 Unpacking，就是将容器里面的元素逐个取出来放在其它地方，好比你父母去菜市场买了一袋苹果回来分别发给家里的每个成员，
多对多中间表详解我们都知道对于ManyToMany字段，Django采用的是第三张中间表的方式。通过这第三张表，来关联ManyToMany的- 环境python版本号系统游览器python 3.7.2win7google chrome关于本文本文将会通过爬虫的方式实现简单的百度翻译。
- 开发过程中总避免不了遇到恶心的乱码，或者由乱码引发的一系列问题。出现乱码是字符集的原因一般而言和逻辑没有太大关系，也就是说整个系统大的方向没
- 最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错，报错来自于webpack进行code spilt之后某
- 1.在vscode中搜索Autoprofixer2.在安装完成之后要配置在需要添加前缀的css文件上，右键点击命令面板，输入Autopref
- 本文实例讲述了Python实现利用最大公约数求三个正整数的最小公倍数。分享给大家供大家参考，具体如下：在求解两个数的小公倍数的方法时，假设两
- 错误信息：ERROR 2002 (HY000): Can't connect to local MySQL server throu
- Go对字符串格式化提供了良好的支持。下面我们看些常用的字符串格式化的例子。package mainimport "fmt"
- 一、前言在开展接口测试或者是接口面试的过程中，我们会发现很多接口需要依赖前面的接口，需要我们动态从前面的接口返回中提取数据，也就是我们通常说
- 什么是约束作用于表上的规则，限制存储在表中的数据约束分类：约束描述关键字非空约束该字段数据不能为nullNOT NULL唯一约束该字段数据唯
- 我们可使用Haskeys属性判别每个条目是否为一个集合，遍历完整的Request.Cookies集合，以来取得所有cookie的列表及其值：
- 来到杭州，迅速租了房子，扫了日常用品。再非专业地提前体验一下与工作有那么一点点点点点相关的UED（用户体验设计）。良好的用户体验是一种非必须
- 一、功能实现对学生对个人信息的增删查改实现后台对所有学生信息的操作二、平台windows+pycharm（python开发工具）三、逻辑框图
- 最近看到一个词叫css reset。什么叫做css reset呢？我理解为重置css，也就是重置默认样式。我在HTML下的默认样式中讲到，一
- 简介在SQL SERVER中，数据库在硬盘上的存储方式和普通文件在Windows中的存储方式没有什么不同，仅仅是几个文件而已.SQL SER
- 今天又帮女朋友处理了一下，她的实验数据，因为python是一年前经常用，最近找工作，用的是c，c++，python的有些东西忘记了，然后就一
- 一、前言html和css的学习大致完成，我们进入重要的JavaScript学习阶段二、什么是JavaScript，有什么用?Javascri
- 当我们导入的模型含有自定义层或者自定义函数时，需要使用custom_objects来指定目标层或目标函数。例如：我的一个模型含有自定义层“S
