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。

相关推荐
猫头虎-前端技术2 分钟前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫2 分钟前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓2 分钟前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java3 分钟前
CSS的文本样式
前端·css
前端小趴菜053 分钟前
css - 滤镜
前端·css
祈祷苍天赐我java之术3 分钟前
理解 CSS 浮动技术
前端·css
索迪迈科技6 分钟前
Flex布局——详解
前端·html·css3·html5
咔咔一顿操作7 分钟前
【CSS 3D 实战】从零实现旋转立方体:理解 3D 空间的核心原理
前端·css·3d·css3
DONG9139 分钟前
深度解析CSS单位与媒体查询:构建现代化响应式布局的核心技术
前端·css·html·css3·媒体
一只小风华~15 分钟前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架