微信小程序事件绑定和点击事件

微信小程序事件绑定和点击事件

<!-- 
  1 需要给input 标签绑定 input 事件
    绑定关键字 bindinput
  2 如何获取 输入框的值
    通过事件源对象来获取
    e.detail.value
  3 把输入框的值 赋值到 data 当中
    不能直接：
            1 this.data.num = e.detail.value
            2 this.num = e.detail.value
    正确的写法：
            this.setData({
              num:e.detail.value
            })
  4 需要加入一个点击事件
      1 bindtap
      2 无法在小程序当中的事件中直接传参
      3 通过自定义属性的方式来传递参数
      4 事件源中获取 自定义属性
 -->

demo.wxml

<input type="" bindinput="handleInput"></input>
<button bindtap="handtap" data-operation="{{1}}">+</button>
<button bindtap="handtap" data-operation="{{-1}}">-</button>
<view> {{num}}</view>

demo.json

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:0
  },
  // 输入框的input事件的执行逻辑
  handleInput(e){
    // console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    }) 
  },
  // 加 减 按钮的事件
  handtap(e){
    // console.log(e);
    // 1 获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num: parseInt(this.data.num) + operation
    }) 
  }
})

示例