微信小程序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 相关文章推荐
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
jquery if条件语句的写法
May 19 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 Javascript
如何使JavaScript休眠或等待
Apr 27 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缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
newxtree.js代码
2007/03/13 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Python绘图实现显示中文
2019/12/04 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
会计专业毕业生自荐信范文
2013/12/20 职场文书
酒店副总岗位职责
2013/12/24 职场文书
学校安全检查制度
2014/01/27 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书