微信小程序开发中类似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
  }
})

<!-- custom-component.wxml -->
<input model:value="{{myValue}}" />

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

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

 

posted @ 2021-09-16 21:11  醉肆意  阅读(1883)  评论(0)    收藏  举报