最终效果

index.wxml

<view class="uploader"><input type="number" style="border: 2rpx solid #666;" bindinput='inputChange' data-name='peopleNumber' placeholder="输入人数" /><input value="{{peopleNumber}}" style="border: 2rpx solid #666;" />
</view>

index.js

Page({data: {},// input框中输入的值，立即保存到worker变量中  视图=>data的更新// 变量worker变更，input框中的数据也就会立即变量   data=>视图 （小程序原本就存在的功能，这一部分不需要刻意实现）inputChange(event) {let _this = thislet dataset = event.currentTarget.dataset;let value = event.detail.valuelet name = dataset.name;console.log(name)_this.data[name] = value;_this.setData({[name]: _this.data[name]})console.log(_this.data[name])}
})

小程序input实现数据双向绑定相关推荐

如何在原生微信小程序中实现数据双向绑定
官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...
微信小程序 input框进行双向绑定
在微信小程序的规则中,input标签中的数据为单向绑定,无法像Vue框架中的v-model直接进行input的双向绑定. 下面有一种思路来解决双向绑定这个思路. 1.利用bindinput记录下inp ...
微信小程序中的数据双向绑定
前言微信小程序因为诸多限制所以它无法像 vue 那样通过指令进行数据绑定,那微信小程序有没有什么办法可以实现数据的双向绑定呢?今天给大家分享两种微信小程序数据绑定的方法. 通过 model:valu ...
小程序微信统计表格_微信小程序简单的数据表格及查询功能
简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具前端:界面布局样式和js的跳转后端:依靠SpringBoot的业务逻辑层项目的码云地址: 微信开发工具的使用和 ...
前端笔记之微信小程序（二）{{}}插值和MVVM模式数据双向绑定指令API
一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...
小程序实现数据双向绑定
因为前端用vue习惯了,vue中有很多特性让开发变得十分方便.如v-mode实现数据的双向绑定.虽然小程序中没有自带的数据双向绑定,但利用bindinput.bindchange也能实现数据双向绑定. ...
简单实现微信小程序 input 的双向绑定
简单实现微信小程序 input 的双向绑定 data 中定义表单数据 data:{formData:{} } wxml 中,利用 data- 传递参数到逻辑层 <input bindinput= ...
小猿圈解析vue数据双向绑定的缺点
vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...
小程序数据框有重影_微信小程序input重影什么原因?怎么解决重影?
微信小程序input重影什么原因?怎么解决重影?微信小程序input输入框输入出现了重影的情况,这是什么原因呢?又该怎么去解决微信小程序input重影问题. 微信小程序input重影怎么办? 问题描述 ...

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

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

最终效果

index.wxml

index.js

小程序input实现数据双向绑定相关推荐

最新文章

热门文章