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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM