用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2021-2-23 18:27

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

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

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

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

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

实现单向数据的双向绑定

单向数据的WXML

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

单向数据的JS

getCurrentValue(e){
	this.setData({value: e.detail.value})
}
  • 1
  • 2
  • 3

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

简易双向绑定

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

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

注意

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

反例(不支持)

<input model:value="值为 {{value}}" />
<input model:value="{{ a + b }}" />
<input model:value="{{ a.b }}" />
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏