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

简易双向绑定

基础库 2.9.3 开始支持，低版本需做兼容处理。

在 WXML 中，普通的属性的绑定是单向的。例如：

<input value="{{value}}" />

在【基础库 2.9.3 】之前，属性的绑定是单向的，在上边的实例中在视图层修改value，只会改变视图层的value，不会对逻辑层的value（this.data.value）进行修改。但是又需要同时修改逻辑层value（this.data.value），怎么做呢？就是采用input组件的bindinput触发事件实现。

实现单向数据的双向绑定

单向数据的WXML

<input bindinput="getCurrentValue" value="{{value}}" />

单向数据的JS

getCurrentValue(e){
	this.setData({value: e.detail.value})
}

实现原理：通过触发bindinput事件，实时监听value的值，然后通过微信小程序提供的this.setData方法，同时对逻辑层(this.data.value)和视图层(value)进行修改。这样就实现数据的双向绑定！

简易双向绑定

<input model:value="{{value}}" />

微信小程序提供的简易双向绑定，在输入框修改value的时候，逻辑层（this.data.value）和视图层（value）就会同时进行修改，优化了调用this.setData的消耗！

注意

1. 只能是一个单一字段的绑定；
2. 目前，尚不能 data 路径。

反例(不支持)

<input model:value="值为 {{value}}" />
<input model:value="{{ a + b }}" />
<input model:value="{{ a.b }}" />

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表