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


Posted in Javascript onMay 29, 2019

在小程序里面是没有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 相关文章推荐
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
javascript实现倒计时关闭广告
Feb 09 Javascript
深入了解响应式React Native Echarts组件
May 29 #Javascript
node将geojson转shp返回给前端的实现方法
May 29 #Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 #Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 #Javascript
JS学习笔记之数组去重实现方法小结
May 29 #Javascript
基于Vue实现电商SKU组合算法问题
May 29 #Javascript
JS学习笔记之闭包小案例分析
May 29 #Javascript
You might like
PHP实现股票趋势图和柱形图
2015/02/07 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python并发2之使用asyncio处理并发
2017/12/21 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
纺织工程专业个人求职信范文
2014/01/27 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
医疗纠纷协议书
2014/04/16 职场文书
2014年生产部工作总结
2014/12/17 职场文书
社区活动总结范文
2015/05/07 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技
MySQL sql模式设置引起的问题
2022/05/15 MySQL