《微信小程序前端开发》（黑马） 课程笔记 Lesson 2 加减计数器

---

1. 知识点

---

完成加减计数器所需要的任务需要以下步骤

1. 需要给input绑定关键字 bindinput

2. 如何获取输入框的值(事件源的对象)

3. 把输入框的值赋值给data
   正确写法:

   this.setData({
   num:e.detail.value
   })

   注:这里num是JS自行定义的一个自变量

4. 绑定点击事件

   1. bindtap
   2. 无法在小程序的事件中直接传参
   3. 通过自定义属性的方法
   4. 事件源中获取属性

---

2. 实现

---

2.1 源代码

wxml配置

<!-- 记得input要加反斜杠 -->
<input type="text" bindinput="handleInput"/>

<button bindtap="handleTap" data-operation="{{1}}"> + </button>
<button bindtap="handleTap" data-operation="{{-1}}"> - </button>

<view>
  {{num}}
</view>

---

JavaScript配置

// pages/demo04/demo04.js
Page({

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

---

2.2 最终结果

---

写在最后

各位看官，都看到这里了，麻烦动动手指头给博主来个点赞8，您的支持作者最大的创作动力哟！
注： 文中图片以及知识点主要参考了黑马程序员微信小程序开发前端教程_零基础玩转微信小程序
才疏学浅，若有纰漏，恳请斧正
本文章仅用于各位同志作为学习交流之用，不作任何商业用途，若涉及版权问题请速与作者联系，望悉知