微信小程序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值的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持！

您可能感兴趣的文章:

• mpvue小程序仿qq左滑置顶删除组件
• 详解使用mpvue开发github小程序总结
• 浅谈使用mpvue开发小程序需要注意和了解的知识点
• mpvue构建小程序的方法(步骤+地址)
• 基于mpvue的小程序项目搭建的步骤
• 微信小程序中添加客服按钮contact-button功能
• 微信小程序组件 contact-button（客服会话按钮）详解及实例代码
• 微信小程序 Button 组件详解及简单实例
• 微信小程序（十四）button组件详细介绍