微信小程序事件绑定其实很简单,但是这里需要单独的拿出来说,主要里面涉及到如何获取数据,以及了解小程序中事件绑定的当前对象里面两个主要属性数据。
数据的双向绑定
借用vue里面的一个说法,实现输入框输入的值,在另一个组件里面动态显示的场景,称为双向绑定,在vue中使用v-model
,在微信小程序里面又如何使用呢,看下面两个场景。
场景一
首先需要创建输入框,为输入框绑定数据输入事件,当输入框中输入值的时候,在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
中取即可。
场景二
通过点击事件对输入框里的值做加一或者减一的操作。
<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)"
,这里需要注意,这种写法在小程序里面是错误的。