小程序mpvue怎么点击按钮获取button里面的值

更新日期: 2019-05-29 阅读: 2.8k 标签: mpvue

小程序里面是没有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('取消')
            }
            }
          })
      }
 });



 

本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!

链接: https://fly63.com/article/detial/3467

mpvue - 美团点评开源的基于 Vue 的微信小程序前端框架

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

mpvue在前端项目的应用设计

其实站在后端开发来讲,由于是服务于业务的系统,又是产品前期,所以也就Spring Cloud一套打完,这里主要想细说的是前端几个项目的情况。这篇文章主要介绍了小程序选型mpvue、跨平台的API请求、基于vuex的项目设计,以及项目在搭建过程中需要注意的地方,这次主要以设计为主

mpvue中的平台状态判断(H5网页 or 小程序)

在开发微信小程序或者微信网页H5的时候,有时我们利用外部组件可能不兼容这两者,需要区分开来,可以在对应的mainjs中配置如下,在微信小程序中 wx作为全局变量能够在任何界面中使用

快速了解 mpvue 开发小程序

mpvue是 美团修改了 Vue.js的 runtime和 compiler使其可以运行在小程序环境中,从而引入了整套 Vue.js开发体验的小程序框架。不同于vue的是我们会在小程序 onReady 后,再去触发 vue mounted 生命周期

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!