小程序实现双向绑定

我们知道vue是双向绑定的前端框架,视图数据的更新,data就会更新;data更新,视图就会更新;这种双向绑定在小程序端似乎不是可以简单运用的,那我们今天就来说说看小程序如何实现双向绑定。

小程序单项绑定的基础知识

首先,我们知道,小程序是单项绑定的过程,即data更新,页面视图就会更新。那么我们就可以不用考虑data=>视图的更新;我们只需要实现视图=>data的更新过程。

实现

  • wxml
    <input type="text" data-name="worker" value="{{worker}}" bindinput="inputChange">
  • js
// input框中输入的值,立即保存到worker变量中  视图=>data的更新
// 变量worker变更,input框中的数据也就会立即变量   data=>视图 (小程序原本就存在的功能,这一部分不需要刻意实现)
inputChange(event) {
  let dataset_name = event.currentTarget.dataset.name   // worker字符串
  let view_name = event.detail.value
  this.setData({
    [dataset_name]: view_name    // worker: input框输入的值
  })
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,141评论 1 32
  • 微信小程序的特点 小程序是一种不需要下载、安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即开打开...
    Simple_3f19阅读 883评论 0 0
  • 美玉真人赏, 毕生良苦心; 雕琢成芳绚, 片小抵万金。
    芬芳的涟漪阅读 716评论 11 27
  • 雨,来得太快!半路上淋成了狗!那个男人静静地躺着马路上,也不管风雨多么猛烈!只是卷缩一团!浑身瑟瑟发抖!很多人停下...
    槟榔谷的疯子阅读 265评论 0 0
  • 类似效果图 YYLabel确实是一个很有用的控件 //外部使用可直接调用此方法,简单方便 subStr即前面带背景...
    颜小宋阅读 5,453评论 1 8