微信小程序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 相关文章推荐
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
js调试系列 初识控制台
Jun 18 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 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
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
深入理解js promise chain
2016/05/05 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
numpy.transpose对三维数组的转置方法
2018/04/17 Python
基于Python的PIL库学习详解
2019/05/10 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
教师绩效工资方案
2014/02/01 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
硕士生工作推荐信
2014/03/07 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
教师节宣传方案
2014/05/23 职场文书
工作证明英文模板
2014/10/21 职场文书
2015年新教师工作总结
2015/04/28 职场文书
旅游项目合作意向书
2015/05/08 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技