《微信小程序前端开发》(黑马) 课程笔记 Lesson 2 加减计数器
2021/11/28 22:12:38
本文主要是介绍《微信小程序前端开发》(黑马) 课程笔记 Lesson 2 加减计数器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 1. 知识点
- 2. 实现
- 2.1 源代码
- 2.2 最终结果
- 写在最后
1. 知识点
完成加减计数器所需要的任务需要以下步骤
-
需要给
input
绑定关键字bindinput
-
如何获取输入框的值(事件源的对象)
-
把输入框的值赋值给
data
正确写法:this.setData({
num:e.detail.value
})注:这里num是JS自行定义的一个自变量
-
绑定点击事件
- bindtap
- 无法在小程序的事件中直接传参
- 通过自定义属性的方法
- 事件源中获取属性
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,您的支持作者最大的创作动力哟!
注: 文中图片以及知识点主要参考了黑马程序员微信小程序开发前端教程_零基础玩转微信小程序
才疏学浅,若有纰漏,恳请斧正
本文章仅用于各位同志作为学习交流之用,不作任何商业用途,若涉及版权问题请速与作者联系,望悉知
这篇关于《微信小程序前端开发》(黑马) 课程笔记 Lesson 2 加减计数器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能?-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享