事件绑定
- 在事件处理函数中为 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)
}
})