我们知道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框输入的值
})
}