小程序记:input双向数据绑定

本文介绍了一种在小程序中实现类似VUE v-model双向绑定的方法。通过bindinput触发改变,并利用data-name属性绑定数据,实现对对象及非对象数据的动态处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

长时间使用VUE,发现v-model确实很好用,用了小程序之后,才发现小程序的双向绑定那么难用,必须有个bindinput来触发改变值。

经过研究发现,小程序的双向绑定也可以实现,但是稍复杂点,思路和大家说一下,最后附代码:

1、利用bindinput来触发改变

2、利用data-name来绑定获取的数据

3、bindinput触发时利用event获取,name的值,然后用this.setData改变data-name绑定的参数。

4、利用data-name中间属性来动态指定对象还是非对象,入data-name="login"或data-name="login.username",这样可以根据中间有没有.来判断是对象还是直接参数

5、将方法拆出来,动态引入,哪个页面用引入到哪个页面

代码如下:

module.exports = {

inputgetName(e){

let name = e.currentTarget.dataset.name;

let nameMap = {}

if(name.indexOf('.')){

let nameList = name.split('.')

if(this.data[nameList[0]]){

nameMap[nameList[0]] = this.data[nameList[0]]

}else{

nameMap[nameList[0]] = {}

}

nameMap[nameList[0]][nameList[1]] = e.detail.value

}else{

nameMap[name] = e.detail.value

}

console.log(nameMap)

this.setData(nameMap)

}

}

const successService = require('../../request/successService.js')

var commonMixin = require('../../mixins/commonMixin')

Page(Object.assign({

/**

* 页面的初始数据

*/

data: {

login:{}

},

formSubmit (e) {// 提交

// console.log('form发生了submit事件,携带数据为:', e.detail.value)

console.log(this.data.login)

console.log(e)

wx.switchTab({

url: '../index/index'

})

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

console.log('分享')

}

},commonMixin))

 

使用时:

<input type='number' placeholder='请输入用户名' maxlength="11" bindinput="inputgetName" data-name='login.username' value='{{login.username}}'/>

动态的是这个地方:bindinput="inputgetName" data-name='login.username',bindinput触发改变,data-name传入动态参数

### 微信小程序 Input 组件双向绑定实现 在微信小程序中,`<input>`组件可以通过特定的方式实现类似于 Vue.js 的双向数据绑定效果。虽然微信小程序并没有像 Vue.js 那样内置完整的双向绑定支持,但是通过合理利用 `bindinput` 和 `this.setData()` 方法可以达到相同的效果。 #### 使用 bindinput 属性监听输入事件并更新数据 为了使 `<input>` 能够响应用户的键盘输入,并实时同步到页面的数据模型中,可以在 WXML 文件里为 `<input>` 添加 `bindinput="handleInputChange"` 来指定当用户修改输入框内容时触发的方法名[^3]: ```xml <input type="text" value="{{inputValue}}" bindinput="handleChange"/> ``` 这里定义了一个名为 `handleChange` 的处理函数用于接收来自视图层的变化通知。 #### 更新数据模型中的值 接着,在对应的 JS 文件内编写该处理器逻辑,每当检测到输入改变就调用 `this.setData({})` 将新的字符串赋给变量 `inputValue` ,从而完成从 UI 到内存状态的一次映射过程[^4]: ```javascript Page({ data: { inputValue: '' }, handleChange(e){ const {value} = e.detail; this.setData({ inputValue: value }); } }) ``` 上述代码片段展示了如何捕获表单控件发出的 change 事件,并把最新的文本串存入 Page 对象下的 `data.inputValue` 字段之中;与此同时,由于初始渲染阶段已经绑定了此字段至 HTML 元素上,所以界面上也会立即反映出最新更改后的结果。 这样便完成了整个循环链路——即由 View 触发 Controller 更改 Model 后再反馈回 View 显示的过程,形成了所谓的“伪·双向绑定”。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值