微信小程序 按钮点击事件

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

wxml中定义按钮组件

<button bind:tap="onClick">点击</button>

js中定义点击处理事件

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

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

点击传参给事件处理

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

<button bind:tap="addScore" data-type="homeTeam" data-score="3" class="btn score-3">+3</button>

js中获取参数

  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()用于更新数据并触发页面更新。