步骤：

（1）主要是使用input的两个方法：bindinput="syncInputValue" bindblur="setInputValue"。

-- 实际上只用bindinput就可以，不过为了减少setDate方法的调用，就把setDate放进bindblur里了。

（2）然后把变量名，通过dataSet传进方法：

wxml: data-field-name="city"

js: let fieldName = e.target.dataset.fieldName;

（3）最后引用变量

this.setData({

[`${fieldName}`]: value

})

代码

wxml

<!--index.wxml-->
<view class="container"><view style="display:flex;"><view>地市：</view><view><input type='text' value="{{ city }}"  data-is-obj="0" data-obj-name="" data-field-name="city" bindinput="syncInputValue" bindblur="setInputValue" /></view></view><view style="display:flex;"><view>姓名：</view><view><input type='text' value="{{ user.name }}"  data-is-obj="1" data-obj-name="user" data-field-name="name" bindinput="syncInputValue" bindblur="setInputValue" /></view></view><view style="margin-top:100rpx;">{{city + "： " +  user.name}}</view></view>

//index.js
//获取应用实例
const app = getApp()Page({data: {city:"泉州",user:{name:"a1"},},onLoad: function () {},syncInputValue: function(e){// console.log("输入：" + e.detail.value)this._tempInputValue = e.detail.value;},setInputValue: function(e){let value = this._tempInputValue;// console.log("写入：" + value)if(!value) {return;}let isObj = e.target.dataset.isObj;let objName = e.target.dataset.objName;let fieldName = e.target.dataset.fieldName;if(isObj=="1"){let obj = this.data[`${objName}`];obj[fieldName] = this._tempInputValue;this.setData({[`${objName}`]: obj});}else{this.setData({[`${fieldName}`]: value})}this._tempInputValue = null;},
})

--要离开输入框才会赋值

微信小程序 input双向绑定相关推荐

微信小程序 input事件绑定
⼩程序中绑定事件,通过bind关键字来实现.如 bindtap bindinput bindchange 等不同的组件⽀持不同的事件,具体看组件的说明即可. 下面举例 input 内容被改变怎么触 ...
微信小程序简易双向绑定失败的可能解决方案
官方文档有一定的误导性: 让人错误的理解为两个value是自己附的值,但事实上只有在括号中的值是自己附的,前面的model:value是语法错误的写法: 正确的写法:
简单实现微信小程序 input 的双向绑定
简单实现微信小程序 input 的双向绑定 data 中定义表单数据 data:{formData:{} } wxml 中,利用 data- 传递参数到逻辑层 <input bindinput= ...
小程序数据框有重影_微信小程序input重影什么原因?怎么解决重影?
微信小程序input重影什么原因?怎么解决重影?微信小程序input输入框输入出现了重影的情况,这是什么原因呢?又该怎么去解决微信小程序input重影问题. 微信小程序input重影怎么办? 问题描述 ...
微信小程序多级列表绑定
微信小程序多级列表绑定 1.wxml <view class="weui-form-preview margin-bottom" wx:key="" wx ...
微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
微信小程序 error 用户绑定的手机号需要验证，请在客户端完成短信
微信小程序 error 用户绑定的手机号需要验证,请在客户端完成短信第一步在电脑上点编译第二步点击预览再点击自动预览第三步打开手机上的小程序确认授权输入短信验证码之后就可以运行了我点二维 ...
微信小程序 slider双向滑动渐变色
微信小程序 slider双向滑动渐变色要求: 两个slider组件,第一个slider组件的选择区域为渐变色,未选择区域为灰色:第二个slider组件的选择区域为灰色,未选择区域为渐变色.无论滑动哪 ...
3-STM32+Air724UG基本控制篇(自建物联网平台)-整体运行测试-微信小程序扫码绑定Air724,并通过MQTT和模组实现远程通信控制
说明这节测试一下微信小程序扫码绑定Air724模组然后实现微信小程序和开发板之间通过MQTT进行远程通信控制. 这一节作为板子的整体功能测试,用户下载这一节的程序用来测试基本控制篇实现的基本功能还 ...

微信小程序 input双向绑定

步骤：

代码

微信小程序 input双向绑定相关推荐

最新文章

热门文章