【小程序】数据和事件绑定和数据同步传参 女爷i 2024-03-30 11:29 15阅读 0赞 **目录** 数据绑定 1. 数据绑定的基本原则 2. 在 data 中定义页面的数据 3. Mustache 语法的格式 4. Mustache 语法的应用场景 5. 动态绑定内容 6. 动态绑定属性 7. 三元运算 8. 算数运算 事件绑定 1. 什么是事件 2. 小程序中常用的事件 3. 事件对象的属性列表 4. target 和 currentTarget 的区别 5. bindtap 的语法格式 6. 在事件处理函数中为 data 中的数据赋值 7. 事件传参 8. bindinput 的语法格式 9. 实现文本框和 data 之间的数据同步 ## 数据绑定 ## ### 1. 数据绑定的基本原则 ### 在 data 中定义数据 在 WXML 中使用数据 ### 2. 在 data 中定义页面的数据 ### 在页面对应的 .js 文件中,把数据定义到 data 对象中即可: ![61cad2768c3b403b99cc5c3fd690b493.png][] ### 3. Mustache 语法的格式 ### 把data中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。语法格 式为: ![cfea8121f6bb4fb38a53d34bead2173f.png][] ### 4. Mustache 语法的应用场景 ### Mustache 语法的主要应用场景如下: 绑定内容 绑定属性 运算(三元运算、算术运算等) ### 5. 动态绑定内容 ### 页面的数据如下: ![aaa4a666a0d14afd8c22813fdcc68e56.png][] 页面的结构如下: ![8b55c3171de844f48a6df98e0a43a92b.png][] ### 6. 动态绑定属性 ### 页面的数据如下: ![1fbb341617de4b17b00c7fb586210084.png][] 页面的结构如下: ![714d0a33c688480386af123e8aeafbd9.png][] ### 7. 三元运算 ### 页面的数据如下: ![fd00c8d8cf984be3957457e69227198c.png][] 页面的结构如下: ![c1933e227ddf4e74b21e110ef5eb476d.png][] ### 8. 算数运算 ### 页面的数据如下: ![ebdf210836e74405a7192c9a965e3186.png][] 页面的结构如下: ![f87db1166a2148e2ba6752d8e2d47afc.png][] ## 事件绑定 ## ### 1. 什么是事件 ### 事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行 业务的处理。 ![d25419c3de2f4f2692bd94db090bcba5.png][] ### 2. 小程序中常用的事件 ### ![b6b7424e791e48b390e6490420e7f23d.png][] ### 3. 事件对象的属性列表 ### 当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示: ![3bebb174c2b64972ad0094d2c002ed9d.png][] ### 4. target 和 currentTarget 的区别 ### target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。举例如下: ![4cd24531913c4b3e9acfef7a1dbe3957.png][] 点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层 view 的 tap 事件处理函数。 此时,对于外层的 view 来说: e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件 e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的 view 组 件 ### 5. bindtap 的语法格式 ### 在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行 为。 通过 bindtap,可以为组件绑定 tap 触摸事件,语法如下:![ef8a281f0bc74531b06f342bf4f2ca28.png][] 在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参 event(一般简写成 e) 来接 收: ![54e7e4f22b15421ea40292e59b7b7b2d.png][] ### 6. 在事件处理函数中为 data 中的数据赋值 ### 通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下: ### ![ff618bf7487c45589723ba3b4fe03cac.png][]7. 事件传参 ### 小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代 码将不能正常工作: ![f185bee3507141f1a2f28b7c34576aa8.png][] 因为小程序会把 bindtap 的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123) 的事件处理函数。 可以为组件提供 data-\* 自定义属性传参,其中 \* 代表的是参数的名字,示例代码如下:![76ddb1f6cbe94dcaacda823d42dc0207.png][] 最终: info 会被解析为参数的名字 数值 2 会被解析为参数的值 在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:![9145aa7d265d4be4973b2773efb8e8b2.png][] ### 8. bindinput 的语法格式 ### 在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下: 通过 bindinput,可以为 文本框绑定输入事件:![28f7436daace42688c7a7946c259d822.png][] 在页面的 .js 文件中定义事件处理函数: ![b5e56967fbc24670a6459abca51ebf3c.png][] ### 9. 实现文本框和 data 之间的数据同步 ### 实现步骤: 定义数据 渲染结构 美化样式 绑定 input 事件处理函数 定义数据:![b0af1019ba49483aafc8bdd133b7cb3d.png][] 渲染结构: ![ec1162aaefe141bfa83cb3918ef28431.png][] 美化样式: ![61d697b5a51441e29fa0c272fd68ddba.png][] 绑定 input 事件处理函数: ![825ea4474009428a9ed9337f232ce9e9.png][] [61cad2768c3b403b99cc5c3fd690b493.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a0a7cddcb5b345138b08c3f91f3fab26.png [cfea8121f6bb4fb38a53d34bead2173f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5e1af7ea7f2244c6a099310e633a4b8b.png [aaa4a666a0d14afd8c22813fdcc68e56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ec62983f00df4af0a8f1295cc27f6356.png [8b55c3171de844f48a6df98e0a43a92b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0a0a3b2e9ded471db5093dde6a7467c7.png [1fbb341617de4b17b00c7fb586210084.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4ce14bc1bf384de5a19ea78330c01c76.png [714d0a33c688480386af123e8aeafbd9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/64a06899554b41fea8b8f67c64b4ddca.png [fd00c8d8cf984be3957457e69227198c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a724fdccecc8428dbecc98e9b72f7cc1.png [c1933e227ddf4e74b21e110ef5eb476d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0b5986b9c7344198b72e7618c9e96354.png [ebdf210836e74405a7192c9a965e3186.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/27763bf867be42d4ab162707371d54f6.png [f87db1166a2148e2ba6752d8e2d47afc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8f4ac2a0424c4f78ad80e9273ed259dc.png [d25419c3de2f4f2692bd94db090bcba5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c441c5c73e19428781309708793fb13d.png [b6b7424e791e48b390e6490420e7f23d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0db418603d1640f48045c8c50e4afdd1.png [3bebb174c2b64972ad0094d2c002ed9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/fc8aefdeeec249eca9bc1757c76336ac.png [4cd24531913c4b3e9acfef7a1dbe3957.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/17be713adc004491af47127ee0f5d078.png [ef8a281f0bc74531b06f342bf4f2ca28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/640edcf48f1344a29a0c0513eb556c8d.png [54e7e4f22b15421ea40292e59b7b7b2d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/12eb273183b6419d903a07f630ed97e0.png [ff618bf7487c45589723ba3b4fe03cac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/bb824004bfe6410b895c72f79c893551.png [f185bee3507141f1a2f28b7c34576aa8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/cc9d672a567c4d5b85c7ea7f77eb2d5f.png [76ddb1f6cbe94dcaacda823d42dc0207.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9bd0f5b6fef44eae91fe6ceae0c39255.png [9145aa7d265d4be4973b2773efb8e8b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c38910da44f448568276a222b86ccd8b.png [28f7436daace42688c7a7946c259d822.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a3fd9ba29d974f1f8c2704c3470532a1.png [b5e56967fbc24670a6459abca51ebf3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/47a9bddd03c94e3d8bba4edacd1ab4db.png [b0af1019ba49483aafc8bdd133b7cb3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/905ce8d3fb4c43878dfef78976df0f64.png [ec1162aaefe141bfa83cb3918ef28431.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/81b0d802c67844ad827932ade9c75c20.png [61d697b5a51441e29fa0c272fd68ddba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/120397e741424a8db92eb97064728ac5.png [825ea4474009428a9ed9337f232ce9e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/35061c3ff7cc4674ab8e1e353bc82b7a.png
还没有评论,来说两句吧...