wepy-数据双向绑定input
初入wepy,发现wepy和vue神似,但还是有不一样的地方,例如v-model数据双向绑定
场景: 一个input搜索框,用户输入内容,点击“叉叉”按钮,输入的内容全部清空,这是一个很常见的场景
jq中解决思路:拿到该input的id或class,$(id).val = "",即可解决
vue中解决思路:v-model 数据双向绑定在input中,点击叉叉时,this.data.aimData = “”;即可解决
wepy中解决思路:wepy没有v-model,但是小程序input有属性:bindinput ,键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容!!!键盘的每一次输入我们都可以都可以实时拿到input的值,在input上绑定value, value = "{{aimData}}"。然后再点击叉叉的时候 this.aimData = "",就可以清除input内容了。但是!!有BUG??清除之后input中再次输入内容时,叉叉就失效了!!
原因:数据是展示了,但是data中并没有再次获取到数据!!不是双向绑定的。
解决:在bindinput 中,手动把input的value值赋给data中的aimData!! 代码:
需要两次绑定才可以实现双向绑定!!坑