初入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. 电脑出现了一块tap window adapter v9 网卡 以及虚拟机桥接模式无法通信原因

    计算机与外界局域网的连接是通过主机箱内插入一块网络接口板(或者是在笔记本电脑中插入一块PCMCIA卡).网络接口板又称为通信适配器或网络适配器(network adapter)或网络接口卡NIC(Ne ...

  2. PDF to PNG to PDF

    PDF to PNG to PDF PDF 2 PNG step 1, install PyMuPDF pip install pymupdf -i http://mirrors.aliyun.com ...

  3. 线性时间求取第 K 大数

    求 Top K 的算法主要有基于快速排序的和基于堆的这两种,它们的时间复杂度都为 \(O(nlogK)\).借助于分治思想,以及快速排序的区间划分,我们可以做到 \(O(n)\) 时间复杂度.具体算法 ...

  4. org.hibernate.MappingException: An AnnotationConfiguration instance is required to use <mapping clas

    在Hibernate中使用annotation出现错误.如题目所示. HibernateSessionFactory类中: //    private  static Configuration co ...

  5. 求旋转数组的最小数字(剑指offer)

    把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转,该数 ...

  6. 你知道 Git 是如何做版本控制的吗?(转)

    总结:阅读这篇文章需要20分钟 本文是转载自 滴滴WebApp架构组 的一篇文章,文章讲解了神秘的.git目录下的一些文件,最终阐述了git是如何存储数据,及git分支的相关内容. git如何存储数据 ...

  7. 《Using Databases with Python》 Week2 Basic Structured Query Language 课堂笔记

    Coursera课程<Using Databases with Python> 密歇根大学 Week2 Basic Structured Query Language 15.1 Relat ...

  8. CSS3——提示工具 图片廓 图像透明 图像拼接技术 媒体类型 属性选择器

    提示工具 提示框在鼠标移动到特定的元素上显示 设置提示框的位置 给提示框添加箭头 提示框的淡入效果 提示框美化 图片廓 响应式图片廓 图像透明 创建透明图像——悬停效果 ———鼠标放置后———> ...

  9. 【EW系列】SAP EWM模块-EWM的常用T-CODE整理

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[EWM系列]SAP EWM模块-EWM的常用T ...

  10. shoi 魔法树

    Harry Potter新学了一种魔法:可以改变树上的果子个数.满心欢喜的他找到了一个巨大的果树,来试验他的新法术.这棵果树共有N个节点,其中节点0是根节点,每个节点u的父亲记为fa[u],保证有fa ...