微信小程序怎么点击按钮获取button里面的值

最新推荐文章于 2025-06-15 12:49:33 发布
最新推荐文章于 2025-06-15 12:49:33 发布
阅读量1.5w 收藏 16
点赞数 6
CC 4.0 BY-SA版权
分类专栏： 微信小程序专栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37591637/article/details/86688513
本文详细介绍了在微信小程序中，如何使用WXML进行button组件的数据绑定，并通过JS代码获取按钮上的绑定数据或未绑定的静态值。第一种情况展示了数据绑定的方法，第二种情况则解释了如何直接获取未绑定数据的技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第一种情况：button里面的值------------数据绑定

wxml代码如下

<view>

<button bindtap="getv" name="bu">{{mess}}</button>

</view>

js代码如下

var meData='中国'

Page({

 

/**

* 页面的初始数据

*/

data: {

mess: meData

},

getv:function(e){

console.log(this.data.mess)

}

})

效果截图

第二种情况：button里面的值-----------数据没绑定(虽然没有什么意义，，但是还是贴出来)

wxml代码如下

<view>

<button bindtap="getv" data-text="yk">yk</button>

</view>

js文本如下

Page({

getv:function(e){

console.log(e.currentTarget.dataset.text)

}

})

效果如下

 

 

 

微信小程序开发-点击事件，获取元素id
Dove言和
03-01 1万+
1、点击事件，获取元素id，页面传值 不是专业程序员，突然就想研究一下微信小程序的开发，开发一个实时的菜价系统小程序，新手一个，什么都不懂，就从0开始，想着写个博客把遇到的问题和解决的办法一点点的写下来吧。 首先遇到的问题就是参数传递； 小程序里的点击触发事件、如何获取当前元素的id、如何吧值传递到下一个页面例： &lt;view class="kindleft"&gt; &...
微信小程序计算器
2301_78374183的博客
06-07 1640
【代码】微信小程序计算器。
微信小程序mpvue点击按钮获取button值的方法
10-16
主要介绍了小程序mpvue点击按钮获取button值的方法，本文通过两种方法，给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序获取button按钮的值：data-xxx
qq_41286138的博客
03-31 4962
wxml中的button标签向js文件中传送值，可以通过data-xxx属性实现，xxx可以自定义。 在js文件中通过如下方式获取： 该方式是通用的，不仅仅只是运用于button标签。 ...
微信小程序 按钮点击事件
最新发布
Gary Leong
06-15 355
微信小程序点击事件与Vue不同，使用bind:tap而非@click。在wxml中定义按钮组件并绑定事件，JS中通过Page()方法定义处理逻辑。通过data-*属性可传参给事件处理函数，在函数内通过e.currentTarget.dataset获取参数值。使用this.setData()更新数据并触发页面重渲染，这是小程序特有的响应式数据更新方式。注意小程序事件绑定语法与传参机制与前端框架存在差异。
微信小程序中Button组件的属性值和用法详解
suqi_123123的博客
05-25 3552
简要介绍Button组件在小程序中的作用和重要性，以及为什么开发者需要深入了解其属性值和用法。size：设置按钮尺寸大小。type：设置按钮样式类型。plain：设置按钮是否镂空。disabled：设置按钮是否禁用。open-type：设置按钮的开放能力。hover-class：设置按钮按下后的样式类。form-type：设置按钮在表单中的功能类型。lang：设置开放能力的语言类型。hover-stop-propagation：设置是否阻止事件冒泡。
微信小程序中点击一个按钮获取文本框中的值
热门推荐
qq_41619567的博客
12-19 1万+
HTML &lt;input bindinput="talk" /&gt; &lt;button bindtap="oks"&gt;确认&lt;/button&gt; JS talks:function(e){ this.setData({ talks:e.detail.value }) }...
提供个小程序，得到按键值的，做小游戏啥的用
纷舞年华的专栏
10-26 708
#include //#include #include using namespace std; short int getkey()//得到按键值 { union key { unsigned short int value; unsigned char ch[2]; } key1; key1.value =0; w
微信小程序实现点击按钮后修改颜色
10-15
在微信小程序中，实现点击按钮后修改颜色是一个常见的交互效果，可以增强用户的操作体验。本文将详细介绍如何在微信小程序中实现这一功能，并提供相应的代码示例。 首先，我们需要理解微信小程序的基本架构。微信小...
微信小程序按钮点击动画效果的实现
01-03
动画效果如下： GIF看起来可能会有点卡 wxml 确定 wxss .confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; font-size: 30rpx; color: #fff;....bubble:after
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
10-15
值得注意的是，微信小程序中disabled属性接受的是布尔值。在设置动态值时，我们应使用`{{isDisabled}}`这样的数据绑定方式。在某些情况下，直接赋值字符串如`disabled="false"`可能导致预期效果不达，因为微信小程序...
微信小程序开发Js获取button的值并实时显示在input上
weixin_52563089的博客
10-20 1117
html代码 方式一 <button bindtap="numBtn" class="bt" data-text="1">1</button> 方式二 <view hover-class="bg" bindtap="numBtn" data-val="1">1</view> JS代码 方式一 var num = e.target.dataset.text 方式二 var num = e.target.dataset.val
微信小程序--获取通过data-* 穿的值
qq_36935391的博客
12-21 5917
parseInt(res.currentTarget.dataset.index); JSON.stringify(jsonstr);//可以将json对象转换成json对符串 JSON.parse(jsonstr); //可以将json字符串转换成json对象 var str='1250' ; Number(str) ; //得到1250 parseInt(str); //...
微信小程序-点击获取绑定事件元素的ID和index
weixin_42017221的博客
02-08 943
小程序list数据带值跳转，一般直接通过设置item的id来标识或者通过设置键值data-xxxx的方式标识。2.通过e.currentTarget.dataset.id 即可获取你自己设置的data-id里面值。1.通过 e.currentTarget.id 即可获取该元素id。
微信小程序开发——button组件
番薯大佬的专栏
03-30 3870
WeChat小程序交流（QQ群：769977169）效果图xxx.wxml结构代码示例&lt;!--pages/modules/Button/button.wxml--&gt; &lt;view class='view'&gt; &lt;button size='mini' disabled='{{disabled}}'&gt;按钮1&lt;/button&gt; &lt;button ...
android 定义button数组,如何从android中的数组列表中获取元素
weixin_35133198的博客
05-26 580
System.out.println(""+user_advertise.size());array=new String[user_advertise.size()];e= user_advertise.keys();int i = 0;int j=0;for(i=user_advertise.size();;i++){array[j]=e.nextElement().toString();Li...
利用微信小程序新动画API之this.animate()实现3D旋转
one_zen的博客
07-09 2825
从微信小程序基础库 2.9.0 开始支持一种更友好的动画创建方式，用于代替旧的 wx.createAnimation 。它具有更好的性能和更可控的接口。
微信小程序开发-事件系统
iOS_HC的博客
01-23 375
1、事件传参：在触发事件时，将一些数据作为参数传递给处理事件函数的过程在组件上通过data-方式进行自定义要传递的数据，其中是自定义的属性2、若传参时，自定义属性是多个单词，单词之间用-进行连接，在事件对象中会转换为小驼峰写法，比如：data-parent-id 会转换为 parentId3、若传参时，自定义属性是多个单词，单词用小驼峰写法，在事件对象中会转换为全部小写法，比如：data-parentId 会转换为 parentid。
微信小程序点击按钮获取当前数组的数据
03-29
### 微信小程序点击按钮获取当前数组数据的实现方法 在微信小程序开发中，通过 `wxml` 和 `js` 文件配合可以轻松实现点击按钮获取当前数组中的数据。以下是具体的实现方式： #### 1. 数据结构设计 首先，在页面的 `data` 中定义一个数组作为数据源。例如： ```javascript Page({ data: { items: [ { id: 1, name: '选项一' }, { id: 2, name: '选项二' }, { id: 3, name: '选项三' } ] } }); ``` 此部分代码用于初始化数组数据[^1]。 #### 2. WXML 结构编写 在 `wxml` 文件中使用 `wx:for` 遍历数组，并为每个按钮绑定点击事件。例如： ```html <view> <block wx:for="{{items}}" wx:key="id"> <button bindtap="submit" data-id="{{item.id}}">{{item.name}}</button> </block> </view> ``` 上述代码实现了遍历数组并将每一项渲染成按钮的操作[^2]。 #### 3. JS 方法处理逻辑 在 `js` 文件中定义 `submit` 函数来捕获点击事件并获取对应的数据。例如： ```javascript Page({ data: { items: [ { id: 1, name: '选项一' }, { id: 2, name: '选项二' }, { id: 3, name: '选项三' } ], selectedId: null // 存储被选中的ID }, submit(e) { const clickedItemId = e.currentTarget.dataset.id; this.setData({ selectedId: clickedItemId }); console.log('Selected Item ID:', clickedItemId); // 可在此处执行更多操作，比如发送请求或将数据传递给PHP后台 } }); ``` 这段代码展示了如何通过事件参数提取目标数据，并将其存储到组件状态中[^3]。 #### 4. 动态样式更新 (可选) 如果希望点击后的按钮显示不同的视觉效果，则可以在 CSS 或者 JavaScript 层面增加额外的状态管理。例如修改背景色表示已选择某一项[^4]: ```css .selected-button { background-color: green; } ``` 再于提交函数内部调整类名应用情况即可达成目的。 以上就是关于如何在微信小程序里设置当用户按下特定按键时能够取得相应列表条目资料的方法说明。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_37591637

请给我持续更新的动力~~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值