P21_事件传参与数据同步
2024-10-21 04:08:13
事件绑定
- 在事件处理函数中为 data 中的数据赋值
- 通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，示例如下：
- 通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，示例如下：
- 事件传参
- 小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正常工作：
因为小程序会把 bindtap 的属性值，统一当作事件名称来处理，相当于要调用一个名称为 btnHandler(123) 的事件处理函数。 - 可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：
最终：- info 会被解析为参数的名字
- 数值 2 会被解析为参数的值
- 在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下：
- 小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正常工作：
- bindinput 的语法格式
在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：- 通过 bindinput，可以为文本框绑定输入事件：
在页面的 .js 文件中定义事件处理函数：
- 通过 bindinput，可以为文本框绑定输入事件：
- 实现文本框和 data 之间的数据同步
- 实现步骤：
- 定义数据
- 渲染结构
- 美化样式
- 绑定 input 事件处理函数
- 定义数据：
- 渲染结构：
- 美化样式
- 绑定 input 事件处理函数：
- 实现步骤：
代码示例：
index.wxml
<!--pages/demo/index.wxml-->
<view>数值：{{count}}</view>
<button type="primary" bindtap="btnHandler" data-info="{{2}}">按钮加加</button>
<input bindinput="inputHandler"></input>
<view>消息：{{msg}}</view>
<input value="{{msg}}" bindinput="iptHandler"></input>
index.js
// pages/demo/index.js
Page({
/**
页面的初始数据
*/
data: {
count: 0,
msg: "你好，"
},
btnHandler(e){
this.setData({
count: this.data.count + e.target.dataset.info
})
},
iptHandler(e){
this.setData({
msg: e.detail.value
})
},
inputHandler(e){
console.log(e.detail.value)
}
})
最新文章
- 转：Delphi的类与继承（VB与delphi比较）
- 在Vi里面实现字符串的批量替换
- CSS3 外发光 渐变色
- [转]Ubuntu 16.04建议安装
- SQL总结（六）触发器
- Ajax实例-购物车
- Clarkson不等式
- STL之Map的运用
- entity framework mysql 那些写法你碰不得
- mongrel
- 2016021904 - 如何使用Memory Analyzer
- 多个php版本的composer使用
- 链表的无锁操作 （JAVA）
- vue学习之响应式原理的demo实现
- spark DataFrame的创建几种方式和存储
- Android Tools 开发工具库开源项目总结
- C++ std::pair的用法
- 如何通过Git GUI将自己本地的项目上传至Github（转）
- 搭建前端监控系统（三）NodeJs服务器部署篇
- iOS - 音乐播放器需要获取音乐文件的一些数据信息(封装获取封面图片的类）