关于javascript:微信小程序基础开发三事件绑定

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、在事件源中获取自定义属性