微信小程序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 对象不变性,对象不变性在任何编程语言中都是一个重要的概念。它会限制对象修改并防止不需要的更改。简而言之,对象的不变性就是将它的状态变为只读的下面详细内容,需要的小伙伴可以参考一下
    2022-02-02
  • jQuery随便控制任意div隐藏的方法

    jQuery随便控制任意div隐藏的方法

    这篇文章介绍了jQuery随便控制任意div隐藏的方法,有需要的朋友可以参考一下
    2013-06-06
  • 将input file的选择的文件清空的两种解决方案

    将input file的选择的文件清空的两种解决方案

    上传文件时,选择了文件后想清空文件路径,经搜索发现个不错的方法在此与大家分享下,感兴趣的朋友不要错过
    2013-10-10
  • javascript严格模式详解(含严格模式与非严格模式的区别)

    javascript严格模式详解(含严格模式与非严格模式的区别)

    这篇文章主要介绍了javascript严格模式详解(含严格模式与非严格模式的区别),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 主页面中的两个iframe实现鼠标拖动改变其大小

    主页面中的两个iframe实现鼠标拖动改变其大小

    iframe实现鼠标拖动改变其大小在一个页面中的两个iframe的情况下,此方法相当实用,感兴趣的各位不妨参考下,或许对你有所帮助
    2013-04-04
  • 原生js实现星星闪烁效果

    原生js实现星星闪烁效果

    这篇文章主要为大家详细介绍了原生js实现星星闪烁效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 通过伪协议解决父页面与iframe页面通信的问题

    通过伪协议解决父页面与iframe页面通信的问题

    这篇文章主要介绍了通过伪协议解决父页面与iframe页面通信的问题,需要的朋友可以参考下
    2015-04-04
  • 小程序实现授权登陆的解决方案

    小程序实现授权登陆的解决方案

    这篇文章主要介绍了小程序实现授权登陆的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • JavaScript中new操作符的原理示例详解

    JavaScript中new操作符的原理示例详解

    javascript中的new是一个语法糖,new的过程实际上是创建一个新对象,把新象的原型设置为构造器函数的原型,这篇文章主要给大家介绍了关于JavaScript中new操作符原理的相关资料,需要的朋友可以参考下
    2021-07-07
  • js流动式效果显示当前系统时间

    js流动式效果显示当前系统时间

    这篇文章主要为大家详细介绍了js实现流动式时间效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05

最新评论