小程序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
投稿猜你喜欢
今天淘到的，终于可以放心的使用IE7了，再也不用换回IE6做测试了！因为这个10M大小的软件已经包含了从IE3到IE6的版本，安装过程中可以- 1 引子 Java，C#等各种高级语句的开发工具琳琅满目，争放异彩。但作为AJAX的主角的JavaScri
- 具体代码和实现方法见下：第一个办法，这个程序可以进行万亿以下的货币金额转换（够用的了吧），其中汉字与数字均按一位计：Function&nbs
- 表格(Table)可读性提升的系统总结，包括“行列组织关系模糊、单元格内容不清晰”两大方面...前边写了个大框架，好像有点笼统，因为没有各点
- 一、oracle oracle服务器有Oracle instace 和Oracle database instance有memory str
- 如果出现 automation服务器不能创建对象 解决方法：1、如果是Scripting.FileSystemObje
- 1. 二维数据曲线图1.1 绘制二维曲线的基本函数1．plot()函数 plot函数用于绘制二维平面上的线性坐标曲线图，要提供一组x坐标和对
- 1．漏洞介绍在XHTML 1.0标准下，使用特殊构造的CSS样式，在Internet Explorer 7.0
- 今天在给一个img加链接时发现的<body> <a href="#1" >&
- 当来自应用程序的第一个连接控制锁而第二个连接需要相冲突的锁类型时，将发生阻塞。其结果是强制第二个连接等待，而在第一个连接上阻塞。不管是来自同
- 上文： 《IE7的web标准之道——1：前言（兼目录）》IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者
- 在许多用SQL Server实现的新的企业系统设计中，系统设计师需要在给数据结构和管理应用程序逻辑的定位上做出具有关键性意义的决定。SQL
- 以下是涉及到插入表格的查询的5种改进方法：1)使用LOAD DATA INFILE从文本下载数据这将比使用插入语句快20倍。2)使用带有多个
- 前言 日益增长的分布式应用需求要求实现更好分布式的软件环境，不断推动着分布式技术的进步。Oracle数据复制是实现分布式数据环境的一种技术，
- 1.安装时选择的自动安装，忘了用户名和密码导致现在试了几个Oracle默认用户名密码後（表格中附带默认用户名及密码），都提示无效的用户名、密
- XMLHTTP对象及其方法－－－－－－－－－－－－－－－－－－MSXML中提供了Microsoft.XMLHTTP对象，能够完成从数据包到R
- 各大云计算提供商(亚马逊、谷歌和微软)目前都使用了键/值存储方式。然而，在San Francisco召开的MSDN开发者大会上，微软宣布他们
- 如果我们的web应用有大量的异步请求，而这些异步请求是在web服务器认证的情况下，那当我们请求发生在服务器认证失效下，服务器自动302到登录
- 昨天看到设计师提供的一张有关多个设计师角色间的漫画图（如下图），着实感到有点讽刺。现在的设计还只是停留在“盲人摸象”的阶段，为什么会这样？在
- <?php $search = array ("'<script[^>]*?>.*?</sc
