• 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!! 代码: 

    需要两次绑定才可以实现双向绑定!!坑

  • 相关阅读:
    获取系统环境变量
    改变系统提示信息
    获取任务栏大小
    获取系统启动后经过的时间
    获取系统版本号
    z-tree的使用
    vue学习-day05 -- 案例:名字合并(监听data数据的改变)
    vue学习-day04(路由)
    eclipse在线安装ermaster插件
    vue学习-day03(动画,组件)
  • 原文地址:https://www.cnblogs.com/fanghl/p/11023212.html
Copyright © 2020-2023  润新知