微信小程序 按钮点击事件

微信小程序中的点击事件跟vue中的不一样,不是使用@click,而是使用bind:tap

wxml中定义按钮组件

html 复制代码
<button bind:tap="onClick">点击</button>

js中定义点击处理事件

javascript 复制代码
// index.js
Page({
  data: {
    message: '尚未点击'
  },
  onClick() {
    console.log('按钮被点击了');

    this.setData({
      message: '按钮已被点击!'
    });
  }
});

点击传参给事件处理

通过data-*属性传参(推荐)

javascript 复制代码
<button bind:tap="addScore" data-type="homeTeam" data-score="3" class="btn score-3">+3</button>

js中获取参数

javascript 复制代码
  addScore(e) {
    const dataset = e.currentTarget.dataset
    const {
      score,
      type,
    } = dataset
    if (type === 'homeTeam') {
      this.setData({
        'homeTeam.score': Number(this.data.homeTeam.score) + Number(score)
      })
    }
  },
  • this.setData()用于更新数据并触发页面更新。
相关推荐
2501_915918415 小时前
Video over HTTPS,视频流(HLSDASH)在 HTTPS 下的调试与抓包实战
网络协议·http·ios·小程序·https·uni-app·iphone
说私域7 小时前
微商本地化发展模式的借鉴与探讨——以开源AI智能名片链动2+1模式S2B2C商城小程序为例
人工智能·小程序·开源
小咕聊编程8 小时前
【含文档+PPT+源码】基于微信小程序的房屋租赁系统
微信小程序·小程序·房屋租赁
云起SAAS8 小时前
菜谱食谱抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·菜谱食谱
2501_9160137415 小时前
iOS 26 系统流畅度检测 从视觉特效到帧率稳定的实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
Stanford_110620 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
游戏开发爱好者81 天前
iOS 26 崩溃日志深度解读,获取方式、系统变动、定位策略
android·macos·ios·小程序·uni-app·cocoa·iphone
郑州光合科技余经理1 天前
微服务架构:基于Spring Cloud ,构建同城生活服务平台
java·spring cloud·微服务·小程序·架构·uni-app
2501_916008891 天前
JavaScript调试工具有哪些?常见问题与常用调试工具推荐
android·开发语言·javascript·小程序·uni-app·ecmascript·iphone
流***陌1 天前
智慧寄件新体验:快递小程序如何简化日常生活
小程序