微信小程序mpvue点击按钮获取button值的方法
2019-05-29 18:02
2091 查看
在小程序里面是没有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值的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 微信小程序分享功能之按钮button 边框隐藏和点击隐藏
- 微信小程序客服消息按钮太小解决方法contact-button
- 微信小程序 | 多个按钮或VIEW,点击改变状态 简易的实现方法
- mpvue+vant app搭建微信小程序的方法步骤
- 微信小程序页面内点击按钮转发 按钮透明的实现方法
- 在 repeater控件中有button控件,如何点击button按钮在后头产生方法
- 微信小程序例子——实现button点击事件改变数据值
- toolstripbutton 动态添加后 获取当前点击的按钮的值 并且将其删除
- 微信小程序获取手机系统信息的方法【附源码下载】
- 【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片
- 在小程序/mpvue中使用flyio发起网络请求的方法
- WPF中button按钮同时点击多次触发click解决方法
- 微信小程序请求二维码:用户点击按钮生成带参二维码
- 微信小程序用户位置权限的获取方法(拒绝后提醒)
- 微信小程序获取手机网络状态的方法【附源码下载】
- listview 中的 item里面带有button按钮的点击实现方法
- 在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
- 获取单选按钮方法不对导致程序闪退
- 微信小程序,点击view获取view对应的内容
- 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】