初入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. python3 导入模块

    python3导入模块和python2  有些不同   需要指定相对目录 如,在Project下有一个nlp目录里面有一个ltp模块,则 from n1.ltp import Clawer

  2. python - assert 断言 语句

    使用assert断言是学习python一个非常好的习惯,python assert 断言句语格式及用法很简单. 用法:在没完善一个程序之前,我们不知道程序在哪里会出错,与其让它在运行时崩溃,不如在出现 ...

  3. 怎么用jira写bug

    工具/原料 有网的电脑 方法/步骤1: 打开公司给的访问JIRA的链接,输入公司给你注册的账号和密码,点击登录 方法/步骤2: 点击JIRA主菜单上的“创建”,进入编辑bug界面 方法/步骤3: 项目 ...

  4. 二：flask-debug模式详解

    debug模式的情况下可以抛出详细异常信息 新建一个脚本并运行 访问 此时是非debug模式,如果运行的时候代码报错了,是不会提示详细错误的,只会报服务器内部错误 开启debug模式,可以查看到详细错 ...

  5. C#爬虫之Senlium

    在爬虫过程中,有的网页是动态更新的,有的数据会在页面加载时通过js加载或者用ajax加载,这时候如果只用普通的Request和Response获取的HTML页面将会不完整.所以这时候可以采用Senli ...

  6. 【算法与数据结构】图的最小生成树 MST - Prim 算法

    Prim 算法属于贪心算法. #include <stdio.h> #define VERTEXNUM 7 #define INF 10000 typedef struct Graph { ...

  7. 初识HTML标签

    web概念概述 JavaWeb: 使用Java语言开发基于互联网的项目 软件架构: C/S: Client/Server 客户端/服务器端 在用户本地有一个客户端程序,在远程有一个服务器端程序 如:Q ...

  8. [转帖]是时候深入了解Linux的系统结构

    是时候深入了解Linux的系统结构   http://os.51cto.com/art/201905/596011.htm linux的体系结果 其实自己也知道 linus 做了一个 kernel 大 ...

  9. org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents mor

    今天在用junit测试mybits程序是遇到一个问题,报错为: org.apache.ibatis.exceptions.PersistenceException: ### Error queryin ...

  10. python 序列解包（解压缩）

    序列解包(解压缩) 所学的解压缩 如果我们给出一个列表,我们需要一次性取出多个值,我们是不是可以用下面的方式实现呢? name_list = ['nick', 'egon', 'jason'] x = ...