微信小程序 按钮点击事件

微信小程序中的点击事件跟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()用于更新数据并触发页面更新。
相关推荐
汤姆yu10 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域17 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域20 小时前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔20 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun1 天前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-54581 天前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ2 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序