黑马程序员小程序学习笔记（5）——事件绑定

1 目标

模拟选择商品数量的功能，当点击加号按钮时显示框内数字+1，点击减号时减一，文本框内输入数字时同步更新显示框。

2 代码及解析

<!-- 
任务分析
    1 需要给input标签绑定 input事件
      绑定关键字 bindinput
    2 如何获取输入框的值？
      通过实践源对象来获取
      e.detail.value
    3 把输入框的值复制到data当中
      不能直接
      1 this.date.num=e.detail
      2 this.num=e.detail.value
      正确写法
      this.setDate({
          num:e.detail.value
      }) 
    4 需要加入一个点击事件
      1 bindtap
      2 无法在小程序的事件当中直接传参
      3 通过自定义属性的方式传递参数  
      4 事件源中获取自定义属性date-operation的值
  -->
<input type="text" bindinput="handleInput"></input>
<!-- 以下是几个测试 -->
<button bindtap="handleTap" data-operation="{{1}}">+</button>
<!-- 这里传入的是一个num -->
<!-- <button bindtap="handleTap" data-operation="{{'1'}}">+</button> -->
<!-- 这里传入的是一个String -->
<button bindtap="handleTap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>

Page({
  data: {
    num: 0
  },
  //输入框的input时间的执行逻辑
  handleInput(e) {
    this.setData({
      num: parseInt(e.detail.value)
      //e.detail.value返回值为String类型，因此用parseInt进行类型转化
    })
  },
  handleTap(e){
    //console.log(typeof e);
    const count = e.target.dataset.operation+this.data.num;
    this.setData({
      num:count
    })
    //绑定事件的参数为e(object)
  }
})

补充知识