微信小程序开发中类似vue的v-model绑定功能


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

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

如果需要在用户输入的同时改变 this.data.value ,需要借助简易双向绑定机制。此时,可以在对应项目之前加入 model: 前缀:

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

用于双向绑定的表达式有如下限制:

1.只能是一个单一字段的绑定,如

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

2.不能 data 路径

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

组件中也支持简易绑定

// custom-component.js
Component({
  properties: {
    myValue: String
  }
})


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

使用组件
<custom-component model:my-value="{{pageValue}}" />

详情见: https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html