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