常见问题您现在的位置是:首页 > 专栏文集 > 微信小程序开发 > 常见问题

微信小程序是双向数据绑定吗?如何实现?

<a href='mailto:'>微wx笑</a>的头像微wx笑2019-10-17 13:26:04常见问题人已围观关键字:微信小程序

简介在微信小程序中,js的数据和前端显示的数据是单数据流,也就是说,js里边的数据变了,前端能立刻显示;但如果前端数据变了,js中的不会改变。如何实现双向的数据绑定?这当然需要通过事件及其处理程序。

微信小程序是双向数据绑定吗?如何实现?guX编程技术_踩坑日志_进阶指南 - 无知人生

在微信小程序中,js的数据和前端显示的数据是单数据流,也就是说,js里边的数据变了,前端能立刻显示;但如果前端数据变了,js中的不会改变。guX编程技术_踩坑日志_进阶指南 - 无知人生


guX编程技术_踩坑日志_进阶指南 - 无知人生

如何实现双向的数据绑定?guX编程技术_踩坑日志_进阶指南 - 无知人生

这当然需要通过事件及其处理程序。guX编程技术_踩坑日志_进阶指南 - 无知人生

比如一个输入框:guX编程技术_踩坑日志_进阶指南 - 无知人生

<input wx:if="{{needMobile}}" type="text" value="{{mobile}}" bindinput="mobileChange" placeholder="请输入手机号" class="ipt-mobile"></input>

通过“bindinput="mobileChange"”绑定一个事件处理程序,当输入的时候执行 mobileChange 方法更新js变量“mobile”的值guX编程技术_踩坑日志_进阶指南 - 无知人生

mobileChange: function(e){
    this.setData({
      mobile:e.detail.value
    })
  },

变量的定义:guX编程技术_踩坑日志_进阶指南 - 无知人生

Page({
  data: {
    mobile:'',
    needMobile:false
  }
})

needMobile 变量为false 输入框隐藏,反之则显示。guX编程技术_踩坑日志_进阶指南 - 无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()

站点信息

  • 建站时间:2018-10-24
  • 服务期限阿里云ECS 2027年到期
  • 主题模板:基于《今夕何夕》修改
  • 文章统计:232篇
  • 文章评论:16条
  • 文章阅读:3870次
  • 文章点赞:1170次
  • 微信公众号:扫描二维码,关注我们
  • 二维码-微信公众号-微wx笑