微信小程序 按钮点击事件

微信小程序中的点击事件跟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()用于更新数据并触发页面更新。
相关推荐
社会底层无业大学生2 小时前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
從南走到北2 小时前
JAVA无人自助共享系统台球室源码自助开台约球交友系统源码小程序
java·微信·微信小程序·小程序·1024程序员节
2501_915918415 小时前
iOS 26 查看电池容量与健康状态 多工具组合的工程实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915909067 小时前
iOS 架构设计全解析 从MVC到MVVM与使用 开心上架 跨平台发布 免Mac
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088917 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
2501_9159214317 小时前
“HTTPS 个人化”实战,个人站点与设备调试的部署、验证与抓包排查方法
网络协议·http·ios·小程序·https·uni-app·iphone
菜鸟una17 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
韩立学长18 小时前
【开题答辩实录分享】以《租房小程序的设计和实现》为例进行答辩实录分享
java·spring boot·小程序
從南走到北19 小时前
JAVA国际版一对一视频交友视频聊天系统源码支持H5 + APP
java·微信·微信小程序·小程序·音视频·交友
future_studio20 小时前
聊聊 Unity(小白专享、C# 小程序 之 联机对战)
unity·小程序·c#