微信小程序基础开发(三)----事件绑定
发表时间:2021-1-4
发布人:葵宇科技
浏览次数:99
1、定义一个num,然后新建一个输入框,使两边的值能够进行双向绑定
.js
Page({
data: {
num: 0
},
//输入框的input事件执行逻辑
handleInput(e) {
this.setData({
num: e.detail.value
})
}
})
.wxml
<!-- 1、需要给input标签绑定input事件
绑定关键字 bindinput
2、通过事件源对象来获取输入框的值
e.detail.value
3、把输入框的值赋值到data中
this.setData({
num:e.detail.value
}) -->
<input type="text" bindinput="handleInput" />
<view>
{{num}}
</view>
2、继续加入点击事件,进行简单的加减
.wxml
<!--
继续加入一个点击事件
1、 bindtap,点击事件
2、无法在小程序当中的事件直接传参
3、需要通过自定义属性的方式传递参数
4、事件源中获取 自定义属性
-->
<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>
{{num}}
</view>
.js
Page({
data: {
num: 0
},
//输入框的input事件执行逻辑
handleInput(e) {
this.setData({
num: e.detail.value
})
},
//加 减按钮的事件
handletap(e){
//获取自定义属性operation
const operation = e.currentTarget.dataset.operation;
this.setData({
num:this.data.num + operation
})
}
})
总结:
1、通过bandinput
给输入框绑定
2、通过e.detail.value
来获取输入框的值
3、通过this.setData({num:e.detail.value})
将输入框的值赋值到data中
4、通过bindtap
给按钮增加点击事件
5、用自定义的属性进行传参
6、在事件源中获取自定义属性