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