微信小程序是双向数据绑定吗？如何实现？
微wx笑
2019-10-17【常见问题】
436
13
0关键字：
微信小程序
在微信小程序中，js的数据和前端显示的数据是单数据流，也就是说，js里边的数据变了，前端能立刻显示；但如果前端数据变了，js中的不会改变。如何实现双向的数据绑定？这当然需要通过事件及其处理程序。
微信小程序是双向数据绑定吗？如何实现？
在微信小程序中，js的数据和前端显示的数据是单数据流，也就是说，js里边的数据变了，前端能立刻显示；但如果前端数据变了，js中的不会改变。
如何实现双向的数据绑定？
这当然需要通过事件及其处理程序。
比如一个输入框：
1 | <input wx:if="{{needMobile}}" type="text" value="{{mobile}}" bindinput="mobileChange" placeholder="请输入手机号" class="ipt-mobile"></input> |
通过“bindinput="mobileChange"”绑定一个事件处理程序，当输入的时候执行 mobileChange 方法更新js变量“mobile”的值
1 2 3 4 5 | mobileChange: function(e){ this.setData({ mobile:e.detail.value }) }, |
变量的定义：
1 2 3 4 5 6 | Page({ data: { mobile:'', needMobile:false }}) |
needMobile 变量为false 输入框隐藏，反之则显示。
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/collection/miniprogram/issue/2019-10-17/261.html
