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

 更新时间:2019年05月29日 14:20:38   作者:Cynthia-milk  
这篇文章主要介绍了小程序mpvue点击按钮获取button值的方法,本文通过两种方法,给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

在小程序里面是没有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点击按钮获取button值的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • javascript属性访问表达式用法分析

    javascript属性访问表达式用法分析

    这篇文章主要介绍了javascript属性访问表达式用法,实例分析了javascript属性访问表达式的功能与使用方法,需要的朋友可以参考下
    2015-04-04
  • IE及IE6浏览器中判断JS文件加载成功失败的方法

    IE及IE6浏览器中判断JS文件加载成功失败的方法

    这篇文章主要介绍了IE及IE6浏览器中判断JS文件加载成功失败的方法,本文使用vbscript来解决这个问题,需要的朋友可以参考下
    2015-02-02
  • ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解

    ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解

    这篇文章主要介绍了ES6中Set和Map数据结构,Map与其它数据结构互相转换操作,结合实例形式详细分析了ES6中的Set和Map数据结构的概念、原理、遍历、去重等操作,以及Map与其它数据结构互相转换操作,需要的朋友可以参考下
    2019-02-02
  • 上传的js验证(图片/文件的扩展名)

    上传的js验证(图片/文件的扩展名)

    下文给大家介绍下js 验证上传图片以及怎样控制一个上传文件的扩展名,感兴趣的朋友可以参考下哈,希望对你有所帮助
    2013-04-04
  • js设置和获取自定义属性的方法

    js设置和获取自定义属性的方法

    下面小编就为大家带来一篇js设置和获取自定义属性的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 详解javascript实现自定义事件

    详解javascript实现自定义事件

    这篇文章主要为大家介绍了javascript实现自定义事件的方法,自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,javascript如何实现自定义事件,需要了解的朋友可以参考下
    2016-01-01
  • JavaScript转换农历类实现及调用方法

    JavaScript转换农历类实现及调用方法

    农历是日常生活中不可或缺的一部分,它与人类的生活息息相关,从某种程度上说,它一直伴随着我们,今天的任务是JavaScript转换农历类的实现,感兴趣的你可以千万不要错过,希望本文对你有所帮助
    2013-01-01
  • JS pushlet XMLAdapter适配器用法案例解析

    JS pushlet XMLAdapter适配器用法案例解析

    这篇文章主要介绍了JS pushlet XMLAdapter适配器用法案例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • 深入理解js A*寻路算法原理与具体实现过程

    深入理解js A*寻路算法原理与具体实现过程

    这篇文章主要介绍了js A*寻路算法原理与具体实现过程,结合实例形式详细分析了A*寻路算法的具体概念、原理、实现方法与相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • JavaScript错误处理机制全面分析讲解

    JavaScript错误处理机制全面分析讲解

    下面小编就为大家带来一篇全面了解javascript中的错误处理机制。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2022-10-10

最新评论