微信小程序mpvue点击按钮获取button值的方法

2024-03-05 05:24:15

在小程序里面是没有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值的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

mpvue构建小程序的方法(步骤+地址)

mpvue是一个使用Vue.js开发小程序的前端框架(美团的开源项目).框架基于Vue.js核心,mpvue修改了Vue.js的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验. mpvue你可以使用你熟悉的vue框架语法,双向绑定让你不用再使用wx的this.setData了,你可以使用npm方便的引入第三方了,真的是贫穷限制了我的想象力啊.个人感觉mpvue比wepy更加简单,上手更加方便,mpuve五分钟教程快速构建.
微信小程序 Button 组件详解及简单实例

微信小程序 Button 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现实例效果图: 属性名类型默认值说明 size String default 有效值default, mini type String default 按钮的样
基于mpvue的小程序项目搭建的步骤

前言 mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. Mpvue官网:http://mpvue.com/ demo地址 :https://github.com/ccwyn/mpvuedemo/tree/mast
微信小程序中添加客服按钮contact-button功能

小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能. 1. 普通客服按钮添加 <button open-type='contact' session-from=''>客服-联系我们</button> 2. 悬浮客服按钮添加,图片自定义大家看地图的有个客服图片图片资源.大家去iconfont 网站去找一个就可以了 index.wxml <button class="kf_button" open-type=&q
详解使用mpvue开发github小程序总结

前言最近有点闲,想起关注已久的mpvue写小程序,所以稍微肝了半个多月写了个github版的微信小程序,已上线.现在总结一下遇到的坑. 扫码体验. 项目地址:https://github.com/cheesekun/wx-github mina坑 scroll-view 高度可滚动视图区域. 使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height. 小程序提供的scroll-view组件,想让他能滚动,就要给他提供一个固定的高度. 我们一般需求是
mpvue小程序仿qq左滑置顶删除组件

背景: 前几天,公司的一个小程序项目开发的时候,遇到了一点点问题.设计师这狗币要让我在小程序上实现类似QQ左滑置顶删除的操作,心里mmp,我就是一个刚来公司三天的小小前端实习生而已,我想学习....当然刚刚来就被公司委以重任,也能看出本人技术过人,尤其是作为一个大二刚刚结束的学生来说.废话不多说,对于这个功能,第一反应就是百度,不百度不得了,一百度吓一跳.前辈们也来都做过."那我不是直接照搬就行,开心".开开心心的用mpvue上手之后,心里mmp,mpvue的坑这么多....还不如自己
浅谈使用mpvue开发小程序需要注意和了解的知识点

一.实例生命周期除了Vue本身的生命周期处,mpvue还兼容了小程序的生命周期,这部分生命周期的钩子来源于微信小程序的Page,除特殊情况外,不建议使用小程序的生命周期钩子. app 部分: onLaunch,初始化 onShow,当小程序启动,或从后台进入前台显示 onHide,当小程序从前台进入后台 page 部分: onLoad,监听页面加载 onShow,监听页面显示 onReady,监听页面初次渲染完成 onHide,监听页面隐藏 onUnload,监听页面卸载 onPullDown
微信小程序组件 contact-button（客服会话按钮）详解及实例代码

微信小程序组件 contact-button contact-button 客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话. 属性名类型默认值说明 size Number 18 会话按钮大小,有效值 18-27,单位:px type String default-dark 会话按钮的样式类型,有效值 default-dark, default-light session-from String 用户从该按钮进入会话时,开发者将收到带上本参数的事件推送.本
微信小程序（十四）button组件详细介绍

button按钮用的算是最普遍的组件之一. 主要属性: wxml  <button type="defaule" bindtap="clickButton">Defalut</button>  <button type="primary" disabled="true" loading=
微信小程序mpvue点击按钮获取button值的方法

在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法方式一:数据绑定这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂苏喂苏喂' }; getData(){ console.log( this.msg ) } 按钮上 <button @click="getDat
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.操作步骤: ① 数据绑定view样式背景属性值 ② 通过逻辑文件设置该背景属性初始值 ③ 通过点击按钮修改背景属性值 3.关键代码 index.wxml文件: <view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view> <button type=
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮修改字体颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="color:{{color}}">我是view标签</view> <view style="display:flex;"> <block wx:for="{{colorArray}}" wx:k
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮修改文字大小功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="font-size:{{fontSize}}pt">我是view标签</view> <button class="btn" type="default" bindtap="magnifyFontS
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocat
微信小程序实现点击按钮后修改颜色

这篇文章主要介绍了微信小程序实现点击按钮后修改颜色,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下需实现的功能: 点击按钮后,按钮的颜色会加深效果展示: 原按钮点击后的按钮思路: 给按钮设置一个点击事件,点击了按钮后,修改按钮的样式. 代码: test.wxml文件 <view wx:if="{{sty==0}}"> <view class="score" style="backg
微信小程序分享功能之按钮button 边框隐藏和点击隐藏

先上图样式设置: 在小程序社区看了下,说是伪类造成的.于是就重新定义下样式.然后就 ok 了. 总结以上所述是小编给大家介绍的微信小程序分享功能之按钮button 边框隐藏和点击隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!
微信小程序实现多个按钮toggle功能的实例

微信小程序实现多个按钮toggle功能的实例如下图所示,实现该按钮toggle功能. 百度上很多都是只设置一个按钮的toggle,所以我现在来稍微总结下:多个按钮如何实现自身的toggle功能. 原理: 1,列表展示的时候,我们会用wx:for 来循环数据,那么我们就会得到相应的当前的第几个数据(即 wx:key="index") 2.在每一个数据里面添加一个toggle的属性,toggle=false 则不展示, 3.设置一个点击方法,获取当前按钮所在的是第几个数据,然后将相应的
微信小程序中吸底按钮适配iPhone X方案

随着第二三批iPhone X的陆续到货,身边的土豪们纷纷用了起来,因为iPhone X的齐刘海导致的适配问题很多,所以这群土豪更沉浸在各种找bug中,不出所料,豌豆公主小程序在一些地方也出现了一丢丢体验不好的地方,主要是商品详情页和购物车的吸底按钮栏,会与 Home Indicator 横条重叠,这样在点击下方按钮时很容易误触发手势操作,如下图: 截图来自网络,侵删是bug就得修,是体验问题就得优化,于是立马搞了一台iPhone X开始研究. 网页端的适配还好,有 viewport meta
微信小程序实现点击拍照长按录像功能的实现代码

代码里面注释写的都很详细,直接上代码.官方的组件属性中有触摸开始和触摸结束属性.本功能依靠这些属性实现. .wxml代码:   <camera wx:if="{{!videoSrc}}" device-position="back" flash="off" binderror="error" style=&

微信小程序mpvue点击按钮获取button值的方法

相关推荐

随机推荐