微信小程序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禁止小键盘输入数字功能代码
Aug 01 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
详解javascript遍历方式
Nov 11 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 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/03/27 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
Angular5.1新功能分享
2017/12/21 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
python实现排序算法
2014/02/14 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
可怜妈妈观后感
2015/06/09 职场文书
小学教师读书笔记
2015/07/01 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
通过Python把学姐照片做成拼图游戏
2022/02/15 Python