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

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

wepy-数据双向绑定input的更多相关文章

  1. 我的angularjs源码学习之旅3——脏检测与数据双向绑定

    前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...

  2. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

  3. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  4. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  5. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  6. Jquery实现数据双向绑定(赋值和取值),类似AngularJS

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  7. 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  8. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  9. 深入理解Proxy 及 使用Proxy实现vue数据双向绑定

    阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

随机推荐

  1. Windows操作路由表

    route print route add 172.17.0.0 mask 255.255.0.0 192.168.99.100 route delete 172.17.0.0 mask 255.25 ...

  2. 测开之路一百二十七:flask之构造response对象

    可以使用flask.make_response构造自定义响应信息 构造一个响应信息为文本,状态码为404 响应 响应数据为json,状态码为200 返回html # coding:utf-8from ...

  3. Monkey测试:启动adb shell失败

    1.在dos环境下输入adb shell 2.遇到adb server version doesn't match this client:killing错误 如: 3.在遇到如上问题时,输入adb ...

  4. oracle 普通数据文件备份与恢复

    普通数据文件指:非system表空间.undo_tablespace表空间.临时表空间和只读表空间的数据文件.它们损坏导致用户数据不能访问,不会导致db自身异常.实例崩溃.数据库不恢复就无法启动的情况 ...

  5. oracle expdp/impdp/可传输表空间

    oracle expdp/impdp/可传输表空间/及一些参数 Oracle data pump 导出操作能够将表.索引.约束.权限.PLSQL包.同义词等对象从数据库导出,并将它们保存在一种非文本格 ...

  6. 操作系统 - Linux操作系统 - Centos - Centos6.5 - 安装|命令|使用汇总

    快捷键 打开终端 右键 —>open terminal 网络配置 配置文件修改 - ONBOOT=no 修改为 ONBOOT=yes 工具 - gcc 安装 yum -y install gcc ...

  7. 深入理解java:1.3. 垃圾收集

    Java垃圾收集(Garbage Collection,GC) 某一个时点,一个对象如果有一个以上的引用(Rreference)指向它,那么该对象就为活着的(Live), 否则死亡(Dead),视为垃 ...

  8. Java简易实现记事本的打开与保存

    记事本的打开与保存 一些总结 * Swing中有时方法不显示,需要把方setVisible(true)放到最后执行 * AWT中的TextArea默认是中间布局 * fileDialog对话框Load ...

  9. PhoneGap学习网址

    官网:http://app-framework-software.intel.com/ 下载地址:http://download.csdn.net/download/haozq2012/7635951

  10. SVN与Git的优点差异比较

    今天自己还是很有进步的,但是 下午的进度很慢,学习还是得回去,不能在工位进行 在网上看到一篇有关于SVN与Git的区别 复制下来了,以后可以经常看看 一. 集中式vs分布式 1. Subversion ...