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!! 代码:
需要两次绑定才可以实现双向绑定!!坑
wepy-数据双向绑定input的更多相关文章
- 我的angularjs源码学习之旅3——脏检测与数据双向绑定
前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...
- Angular数据双向绑定
Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
- 原生js实现数据双向绑定
最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- Jquery实现数据双向绑定(赋值和取值),类似AngularJS
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- 深入理解Proxy 及 使用Proxy实现vue数据双向绑定
阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...
随机推荐
- 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 ...
- 测开之路一百二十七:flask之构造response对象
可以使用flask.make_response构造自定义响应信息 构造一个响应信息为文本,状态码为404 响应 响应数据为json,状态码为200 返回html # coding:utf-8from ...
- Monkey测试:启动adb shell失败
1.在dos环境下输入adb shell 2.遇到adb server version doesn't match this client:killing错误 如: 3.在遇到如上问题时,输入adb ...
- oracle 普通数据文件备份与恢复
普通数据文件指:非system表空间.undo_tablespace表空间.临时表空间和只读表空间的数据文件.它们损坏导致用户数据不能访问,不会导致db自身异常.实例崩溃.数据库不恢复就无法启动的情况 ...
- oracle expdp/impdp/可传输表空间
oracle expdp/impdp/可传输表空间/及一些参数 Oracle data pump 导出操作能够将表.索引.约束.权限.PLSQL包.同义词等对象从数据库导出,并将它们保存在一种非文本格 ...
- 操作系统 - Linux操作系统 - Centos - Centos6.5 - 安装|命令|使用汇总
快捷键 打开终端 右键 —>open terminal 网络配置 配置文件修改 - ONBOOT=no 修改为 ONBOOT=yes 工具 - gcc 安装 yum -y install gcc ...
- 深入理解java:1.3. 垃圾收集
Java垃圾收集(Garbage Collection,GC) 某一个时点,一个对象如果有一个以上的引用(Rreference)指向它,那么该对象就为活着的(Live), 否则死亡(Dead),视为垃 ...
- Java简易实现记事本的打开与保存
记事本的打开与保存 一些总结 * Swing中有时方法不显示,需要把方setVisible(true)放到最后执行 * AWT中的TextArea默认是中间布局 * fileDialog对话框Load ...
- PhoneGap学习网址
官网:http://app-framework-software.intel.com/ 下载地址:http://download.csdn.net/download/haozq2012/7635951
- SVN与Git的优点差异比较
今天自己还是很有进步的,但是 下午的进度很慢,学习还是得回去,不能在工位进行 在网上看到一篇有关于SVN与Git的区别 复制下来了,以后可以经常看看 一. 集中式vs分布式 1. Subversion ...