微信小程序MINA框架之事件绑定(二)

微信小程序事件绑定其实很简单,但是这里需要单独的拿出来说,主要里面涉及到如何获取数据,以及了解小程序中事件绑定的当前对象里面两个主要属性数据。

数据的双向绑定

借用vue里面的一个说法,实现输入框输入的值,在另一个组件里面动态显示的场景,称为双向绑定,在vue中使用v-model,在微信小程序里面又如何使用呢,看下面两个场景。

场景一

首先需要创建输入框,为输入框绑定数据输入事件,当输入框中输入值的时候,在view组件中,实时显示输入框中输入的值。

1
2
<input bindinput="handleInput" />
<view>{{content}}</view>
1
2
3
4
5
6
7
8
9
10
11
Page({
data:{
content:""
},
// 绑定的事件,e为当前的事件对象
handleInput(e){
this.setData({
content:e.detail.value
})
}
})

上面的代码就实现了预期的功能,这里主要时对e进行一个说明,它的主要结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
{
"detail":{
"value":"",
"id":""
},
"currentTarget":{
"dataset":{
"cname":"",
"age":""
}
}
}

在这个结构中有两个很重要的属性,分别是detailcurrentTarget.dataset,其中detail里面是标签value属性,而在currentTarget.dataset中则是自定义属性,可以是任意的名称。这个示例是获取input标签本身value属性的值,因此直接从detail中取即可。

场景二

通过点击事件对输入框里的值做加一或者减一的操作。

1
2
3
<input value="{{result}}"/>
<button bindtap="handleTap" data-num="{{1}}">+</button>
<button bindtap="handleTap" data-num="{{-1}}">+</button>
1
2
3
4
5
6
7
8
9
10
11
12
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)"这里需要注意,这种写法在小程序里面是错误的

微信公众号


本文作者:IT-CRUD
原文地址:http://blog.itcrud.com/blogs/2020/08/weixin-mina-bind-event-02
版权归作者所有,转载请注明出处

支付宝 微信

如果文章对你有帮助,欢迎点击上方按钮打赏作者