wx小程序-button的bindtap事件

一、button标签

由于小程序语法中,处理函数不能带参数,所以不能实现直接调用要修改的数据。所以除了用bindtap(提示:bindtap和bind:tap两种语法都是正确的)绑定处理函数,还需要在button属性中添加一个data-(待修改的数据),这里我们直接命名成data-info。在index.wxml。

复制代码
<button type="primary" bind:tap="btnTap2" data-info="{{22}}">增加</button>

这里data-info的值给了22,一定要用这种类似差值表达式的{{}}形式,否则直接在双引号里面写22,就是字符串,而不是数字 。

二、通过处理函数改变数据

在index.js文件夹下data里面放一个数据count,初值设为0。在函数setData里面通过this.data.count获取count,通过e.target.dataset.info获取data-info的值。

复制代码
Page({
  // 页面初始数据
  data: {
    count:0
    },
    //定义按钮事件处理函数
    btnTap2(e){
      this.setData({
        count:this.data.count+e.target.dataset.info
      })
    }
})

这样的效果就是每次点击按钮,count就会加上data-info的值也就是22。

相关推荐
哆啦A梦15881 天前
axios 的二次封装
前端·vue.js·node.js
小Tomkk1 天前
Rokid 开发空间小程序 实战
3d·小程序·rokid·jsar
阿珊和她的猫1 天前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo1 天前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
说私域1 天前
基于多模态AI技术的传统行业智能化升级路径研究——以开源AI大模型、AI智能名片与S2B2C商城小程序为例
人工智能·小程序·开源
snow@li1 天前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
2501_916007471 天前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
浪裡遊1 天前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
游戏开发爱好者81 天前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
漂流瓶jz1 天前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化