微信小程序`input`双向绑定原理详解

最新推荐文章于 2023-10-10 10:54:11 发布

原创

最新推荐文章于 2023-10-10 10:54:11 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

前沿

本篇博文就好好了解一哈小程序的数据双向绑定的原理

1，首先利用bindinput来触发改变input输入框中的值
2，使用data-name来获取改变的数据的内容name自己取名
3， bindinput触发后在方法中通过e.currentTarget.dataset.name来获取改变后的内容‘
4，通过this.setData()来改变data-name绑定的参数就好了
看下边的代码一目了然

//data-name绑定的值就是value的值，这样才能随时更新到value中
<input type="text" bindinput="inputEdit"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

郝艳峰Vip

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序 - input 实现双向数据绑定（实时更新数据变化）

🏆 前端领域优质创作者

08-17

1万+

前言我们知道，Vue项目实现双向绑定很轻松，但在小程序项目中却不能如此简单的实现。在微信小程序中，需要借助input组件的bindinput属性，每次输入值触发函数更新来完成。实现 input组件官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/input.html wxml：  <text>数据：{{message}}</tex

微信小程序：input双向绑定

HadesNyx

12-02

5421

总结一下，微信小程序的输入框双向绑定是通过数据绑定和事件绑定来实现的。通过将输入框的值绑定到一个变量上，并通过事件监听输入框的值变化，然后更新绑定的变量，从而实现了输入框的双向绑定。这样，输入框中的值发生变化时，会实时地影响到变量的值，同时变量的值变化也会实时地反映在输入框中，从而实现了输入框的双向绑定。

2 条评论您还未登录，请先登录后发表或查看评论

2 条评论

头不秃的熙 2022.06.02
照着打都报错

头不秃的熙 2022.06.02
我要被双向绑定搞傻了

Vue双向绑定原理，教你一步一步实现双向绑定

weixin_33701294的博客

10-24

270

当今前端天下以 Angular、React、vue 三足鼎立的局面，你不选择一个阵营基本上无法立足于前端，甚至是两个或者三个阵营都要选择，大势所趋。所以我们要时刻保持好奇心，拥抱变化，只有在不断的变化中你才能利于不败之地，保守只能等死。最近在学习 Vue，一直以来对它的双向绑定只能算了解并不深入，最近几天打算深入学习下，通过几天的学习...

微信小程序----简易双向绑定

止于至善

12-07

2692

简易双向绑定 基础库 2.9.3 开始支持，低版本需做兼容处理。在 WXML 中，普通的属性的绑定是单向的。例如： <input value="{{value}}" /> 在【基础库 2.9.3 】之前，属性的绑定是单向的，在上边的实例中我们在视图层修改value，只会改变视图层的value，不会对逻辑层的value进行修改。但是我们又需要同时修改逻辑层value，怎么做呢？就是采用input组件的bindinput触发事件实现。实现单向数据的双向绑定 单向数据的WXML <

关于微信小程序中的数据双向绑定如何实现

m0_67584973的博客

03-31

6004

实现微信小程序双向数据绑定方法

微信小程序中如何实现双向绑定

Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。

01-13

8950

微信小程序中实现数据双向绑定介绍及复杂对象绑定时堆溢出问题的解决说明。

小程序input数据双向绑定实现方法

10-16

总之，微信小程序中的数据双向绑定需要开发者手动实现，通过`input`的`bindinput`事件和自定义的`data-modal`属性，结合事件处理函数，可以达到类似的效果。理解这一机制对于高效地编写小程序至关重要。在实际开发中...

微信小程序input在表单提交中的关键作用及优化策略

本文首先概述了微信小程序input组件的基本功能和特性，然后深入探讨了其在表单提交中的关键作用，特别是数据绑定与交互机制，以及在表单验证中的应用。针对性能问题，文章提出了优化策略，以减少数据绑定的开销和...

微信小程序input联动设计：实现高效表单数据交互的终极指南

本文深入探讨了微信小程序input组件的联动设计与实践技巧。从input组件的基本属性、数据绑定、事件处理到用户体验优化，文章系统性地阐述了input联动设计的理论基础和实践要点。特别针对复杂场景下的联动解决方案、...

微信小程序下拉输入框组件实现详解

微信小程序下拉输入框的实现是一个在移动端开发中极为常见且实用的功能需求，尤其在表单填写、搜索筛选、地址选择等场景中广泛应用。本文所描述的内容聚焦于如何在微信小程序原生环境以及跨平台框架uniapp中，构建一...

微信小程序-----input数据双向绑定

淘淘桃的博客

07-20

2250

这里介绍两种获取的方式：1、用户每输入一个字节就获取一个字节2、用户全部输入结束了之后，再一起获取整个input输入框的值注意：第二种方式会比较节省内存资源。

微信小程序之数据绑定原理解析

01-03

最近在帮朋友写个小程序，本人小白一枚，但是好在计算机科班出身，有些概念一看还是明白的，只是之前没实际写过程序。于是最近看了好多资料和视频，不得不说，对于小白来讲，还是有点难度，但是不大。通过最近看资料和别人的视频，总结一下： 1.页面布局，先画好。都是盒子，需要几个盒子，你就先画几个盒子。比如下面这个页面：红色盒子浅蓝盒子绿色盒子（这个绿色盒子里又可以切分成两个盒子：白色字体较大一个盒子，白色字体较小一个盒子）蓝色盒子 2.数据先静态，后动态简单的说就是刚开始，你可以直接先往页面里塞静态数据，然后调试样式，样式搞定了，就可以把静态数据换成动态数据了。换动态数据呢，又可以

微信小程序 input双向绑定

热门推荐

u013595395的博客

08-25

1万+

前言: 首先，小程序没有自带的双向绑定。正文里是模拟效果，原理是用字符串名来引用变量。步骤：（1）主要是使用input的两个方法：bindinput="syncInputValue"bindblur="setInputValue"。 -- 实际上只用bindinput就可以，不过为了减少setDate方法的调用，就把setDate放进bindblur里了。（2）然后把变量名，通过dataSet传进方法： wxml: data-field-name="c...

微信小程序input实现双向数据绑定

weixin_47818125的博客

10-10

916

双向数据绑定的原理：就是value 加上 input输入事件的结合。

微信小程序提交表单多个input输入框，通过一个bindinput方法实现双向数据绑定

guairena的博客

10-28

3816

微信小程序提交表单多个input输入框，通过一个bindinput方法实现双向数据绑定

微信小程序---双向绑定

python_web全栈

02-19

3076

1. html <text>{{ phone }}</text> 账号 <input bindinput="bindKeyInput" placeholder="请输入账号"/> 2. js data: { phone: "", }, // 双向绑定账号 bindKeyInput: function (e) { // console.log(e) this.setData({ phone: e.det

微信小程序 input框进行双向绑定

怎奈你何的博客

03-09

2915

在微信小程序的规则中，input标签中的数据为单向绑定，无法像Vue框架中的v-model直接进行input的双向绑定。下面有一种思路来解决双向绑定这个思路。 1、利用bindinput记录下input框中每次输入的值。 wxml代码： <input type="text" value="{{searchCode}}" confirm-type="search" bindconfirm="getSearchResult" bindblur="getSearchValue" bindinpu

微信小程序信息输入框即数据双向绑定

Sunshinedada的博客

06-19

3469

微信小程序信息输入框的写法在这里插入图片描述首先进行数据双向绑定首先接口如下静态写好，开始进行数据双向绑定 首先进行数据双向绑定 由于微信小程序是单项数据流，在使用输入框的时候必须先进行数据双向绑定 首先接口如下静态写好，开始进行数据双向绑定 html: <view class="setting_shop"> <view class="shop_content"> <view class="shop-title">

【微信小程序】 input双向数据绑定

Enchanted to meet U

07-29

2963

在微信小程序中，js的数据和前端显示的数据是单数据流 js里边的数据变了，前端能立刻显示但如果前端数据变了，js不能改变解决方法写一个下面的js方法,名称可以任意取，用于绑定input输入 bindInput(e){ // 表单双向数据绑定 var that = this; var dataset = e.target.dataset; // data-开头的是自定义属性，可以通过dataset获取到，dataset是一个json对象 var name .

微信小程序数据双向绑定与列表点击跳转详解

在微信小程序的开发过程中，数据双向绑定和对数据的操作是构建用户界面的关键环节。数据双向绑定使得JavaScript（JS）层的数据与用户界面（UI）保持同步，极大地简化了动态数据展示的逻辑。而列表项的点击事件处理则...