微信小程序mpvue点击按钮获取button值的方法
在小程序里面是没有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值的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
- 微信小程序将页面按钮悬浮固定在底部的实现代码
- 微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
- 微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
- 微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
- 微信小程序批量监听输入框对按钮样式进行控制的实现代码
- 微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
- 微信小程序按钮点击动画效果的实现
- 操作按钮悬浮固定在微信小程序底部的实现代码
- 详解微信小程序胶囊按钮返回|首页自定义导航栏功能
- 微信小程序单选radio及多选checkbox按钮用法示例
- 微信小程序开发之点击按钮退出小程序的实现方法
- 微信小程序按钮巧妙用法
相关文章
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
这篇文章主要介绍了ES6中Set和Map数据结构,Map与其它数据结构互相转换操作,结合实例形式详细分析了ES6中的Set和Map数据结构的概念、原理、遍历、去重等操作,以及Map与其它数据结构互相转换操作,需要的朋友可以参考下2019-02-02JS pushlet XMLAdapter适配器用法案例解析
这篇文章主要介绍了JS pushlet XMLAdapter适配器用法案例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
最新评论