微信小程序事件绑定其实很简单,但是这里需要单独的拿出来说,主要里面涉及到如何获取数据,以及了解小程序中事件绑定的当前对象里面两个主要属性数据。
1. 数据的双向绑定
借用 vue 里面的一个说法,实现输入框输入的值,在另一个组件里面动态显示的场景,称为双向绑定,在 vue 中使用v-model
,在微信小程序里面又如何使用呢,看下面两个场景。
1.1 场景一
首先需要创建输入框,为输入框绑定数据输入事件,当输入框中输入值的时候,在view
组件中,实时显示输入框中输入的值。
<input bindinput="handleInput" /> <view>{{content}}</view>
Page({
data: {
content: "",
},
// 绑定的事件,e为当前的事件对象
handleInput(e) {
this.setData({
content: e.detail.value,
});
},
});
上面的代码就实现了预期的功能,这里主要时对e
进行一个说明,它的主要结构如下:
{
"detail": {
"value": "",
"id": ""
},
"currentTarget": {
"dataset": {
"cname": "",
"age": ""
}
}
}
在这个结构中有两个很重要的属性,分别是detail
和currentTarget.dataset
,其中detail
里面是标签 value 属性,而在currentTarget.dataset
中则是自定义属性,可以是任意的名称。这个示例是获取input
标签本身 value 属性的值,因此直接从detail
中取即可。
1.2 场景二
通过点击事件对输入框里的值做加一或者减一的操作。
<input value="{{result}}" />
<button bindtap="handleTap" data-num="{{1}}">+</button>
<button bindtap="handleTap" data-num="{{-1}}">+</button>
Pages({
data: {
result: 0,
},
handleTap(e) {
// 从currentTarget.dataset中获取num值
const num = e.currentTarget.dataset.num;
this.setData({
result: this.data.result + num,
});
},
});
从上面对currentTarget.dataset
的解释,再加上这个示例,就可以更好的理解currentTarget.dataset
作用。但是这里好像比较麻烦,为啥不在定义绑定方法的时候传入值的,如bindtap="handleTap(1)"
,这里需要注意,这种写法在小程序里面是错误的。