微信小程序mpvue点击按钮获取button值的方法

作者:开源拾贝时间:2026-10-23 07:48:56浏览:298

本文介绍在mpvue开发微信小程序时,如何获取按钮点击值。第一种方式通过data数据绑定适用于单按钮场景;第二种方式利用自定义属性data-text结合$event事件对象,适用于多按钮复用同一处理函数的场景,需注意传入$event以获取正确数据。

mpvue获取按钮值的方法概述

在微信小程序开发中,由于不存在传统的DOM元素概念,开发者通常无需处理DOM操作。然而在实际开发过程中,偶尔会遇到需要点击特定元素并获取其对应值的需求。针对这一场景,本文列举了两种可行的解决方案。

方式一:数据绑定

方式一:数据绑定

该方式适用于页面中仅有一个按钮或单一元素需要调用该方法的情况。

首先,在对应的.vue文件中的data数据部分添加一个变量。


 data() {
  return {
   
   msg:'苏喂苏喂苏喂'

  };
getData(){
 console.log( this.msg )
}

接着,在按钮组件上进行配置。

<button @click="getData()" name="bu">{{msg}}</button>

然而,当页面中存在多个元素需要调用同一方法时,上述方式显得不够灵活且难以维护。因此,下面介绍的第二种方法旨在弥补方式一的不足。

方式二:自定义属性与事件对象

方式二:自定义属性与事件对象

在.vue文件的data中定义一个变量用于接收相关数据。


 data() {
  return {
   concat:'12345678'
  };

在template模板中,为按钮添加自定义属性data-text以存储具体值。


<van-cell-group>
   <van-cell title="电话" value="点击拨打" data-text="*******" icon="phone" />
   <van-cell title="微信" value="点击复制" data-text="********" icon="chat" @click="copy($event)"/>
   <van-cell title="邮箱" value="点击复制" data-text="*******" @click="copy($event)" icon="invition"/>
   <van-cell title="博客" value="点击复制" data-text="******
" icon="desktop-o" @click="copy($event)"/>
  </van-cell-group>

在调用函数时,务必传入$event参数,否则获取到的事件对象e将为undefined,导致无法正确读取数据。

定义具体的处理函数。


copy(e){
   var that = this;
   console.log(e.currentTarget.dataset.text)
    wx.setClipboardData({
     data: e.currentTarget.dataset.text,
     success: function (res) {
     wx.showModal({
      title: '提示',
      content: '复制成功',
      success: function (res) {
      if (res.confirm) {
       console.log('确定')
      } else if (res.cancel) {
       console.log('取消')
      }
      }
     })
   }
 });

总结

以上介绍了微信小程序mpvue中点击按钮获取值的两种方法,希望能对读者有所帮助。如有任何疑问,欢迎留言,小编会及时回复。感谢大家对本站的支持!

作者最新文章