常用事件与属性列表
处理点击事件
接下来我们希望做一件事情:
创建一个按钮
当用户点击按钮时
让 product 的 num + 1
创建按钮的方式非常简单:
html
<button type="primary">num + 1</button>
问题在于:我们如何给这个按钮添加点击事件呢?
有过开发经验的同学,可能会猜到:我们可以给 button
一个 click
事件来监听按钮的点击。
可是大家需要知道,现在我们是在【小程序】中,那么如果想要给 button
添加点击事件则不可以使用 click
而是 bind:tap / bindtap
。
其中 bind: / bind
表示【绑定事件】,tap
为绑定的具体事件。小程序具体事件列表,可以点击 这里 查看。
html
<button type="primary" bind:tap="onAddNum">num + 1</button>
接下来需要在 js
中定义对应的 事件
js
/**
* 定义事件处理的方法
*/
onAddNum () {
console.log('onAddNum')
}
到目前:我们已经 监听了按钮的点击事件,并且写入了对应的处理函数 ,接下来就需要 **修改 num 的值 **
修改 data 的数据
想要修改 data
中的数据,那么我们需要借助一个函数 setData
。
setData
接收一个 对象作为参数,这个对象就是最新的 data
数据。
其中 key
为要修改的数据, value
为最新的值
访问 data 的数据
因为我们想要让 num + 1
,所以我们还需要拿到 num
的当前值,想要访问 num
的值,可以通过 this.data.product.num
的形式访问
所以最终的修改 num
的代码为:
js
/**
* 定义事件处理的方法
*/
onAddNum () {
this.setData({
'product.num': this.data.product.num + 1
})
此时,当我们点击 button
,可以发现:【当 num 发生改变时,总价格也发生了对应的变化】
- 如何为按钮添加点击事件?
bindtap
||bind:tap
- 如何修改 data 中数据的值?
- 通过
this.setData({})
定义新的值- 通过
this.data
访问具体的值