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

最新推荐文章于 2024-05-21 09:41:01 发布

S.A.

最新推荐文章于 2024-05-21 09:41:01 发布

阅读量332

点赞数 1

分类专栏：微信小程序笔记文章标签：小程序

本文链接：https://blog.csdn.net/weixin_44321098/article/details/105983871

版权

微信小程序笔记专栏收录该内容

5 篇文章 4 订阅

订阅专栏

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)
  }
})