在小程序里面是没有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里面的值的更多相关文章

  1. Py3+PyQt5+Eric6:学习记录之第一天:点击按钮获取文本框的值并输出。

    一.使用qt designer拖拽界面. 使用qtdesigner拖拽界面:

  2. jquery获取transform里面的值

    用transform的translateX写了一个侧滑效果,如何获取它改变的值是多少呢? 获取translateX值的方法: $('div').css("transform").r ...

  3. js和jquery获取span里面的值

    JQ和Js获取span标签的内容 html: 1 <span id="content">‘我是span标签的内容’</span> javascript获取: ...

  4. spring Controller 层注解获取 properties 里面的值

    前言:最近在做一个项目,想要在 controller 层直接通过注解 @Value("")来获取 properties 里面配置的属性. 这个其实和 springmvc.sprin ...

  5. PHP 怎么随机获取数组里面的值

    注意array_rand随机返回的是KEY值的集合 <?php srand((float) microtime() * 10000000); $input = array("Neo&q ...

  6. php随机获取数组里面的值

    srand() 函数播下随机数发生器种子,array_rand() 函数从数组中随机选出一个或多个元素,并返回.第二个参数用来确定要选出几个元素.如果选出的元素不止一个,则返回包含随机键名的数组,否则 ...

  7. Activity往另外一个Activity传值,Fragment获取另外一个Activity里面的值。

    在oneActivity中实现跳转到MainActivity //intent 用来跳转另外一个MainActivity,bundle传值到MainActivity         Intent Ma ...

  8. 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法

    异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返 ...

  9. 微信小程序mpvue项目使用WuxWeapp前端UI组件

    前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面 ...

随机推荐

  1. centos7删除PHP怎么操作

    前面我们说了centos7删除MariaDB,现在我们说说centos7删除PHP怎么操作?当然不是特殊需要,不要去删除PHP,后果很严重.操作之前请做好所有的备份!首先查看有没安装php以及版本 # ...

  2. windows命令行模式打开目录

    cmd命令行里面,打开当前目录方式如下: explorer .

  3. python基础之五:dict 字典

    1.数据类型的划分:可变数据类型.不可变数据类型 不可变的有:元组(tuple).字符(str).整型(int).布尔型(bool) 它们都可以哈希 可变的:列表(list).set.字典(dict) ...

  4. Spring Cloud微服务安全实战_3-2_第一个API及注入攻击防护

    1,本节主要讲了sql注入防范,如果使用mybatis,需要注意mapper.xml里面$会造成sql注入风险. 第一个 api 代码:https://github.com/lhy1234/sprin ...

  5. classmethode,staticmethode、反射

    目录 classmethod: staticmethod: classmethod与staticmethod都是python解释器内置的装饰器 类中定义的函数分为两大类:绑定方法和非绑定方法 在类中正 ...

  6. W5500 学习开发: W5500学习说明

    前言 官方已经给了大部分的例子,我只是做一下移植说明 这一节看一下如何移植官网程序的DHCP 首先先明确:单片机和W5500通信是通过SPI,所有的数据都是通过SPI接收和发送, 所以,拿到官方源码只 ...

  7. 在Hadoop-3.1.2上安装HBase-2.2.1

    目录 目录 1 1. 前言 3 2. 缩略语 3 3. 安装规划 3 3.1. 用户规划 3 3.2. 目录规划 4 4. 相关端口 4 5. 下载安装包 4 6. 修改配置文件 5 6.1. 修改策 ...

  8. PATA1035Password

    需要注意的就是把判定函数提取出来,这样可以简化代码,同时参数引用了&,可以对于传入参数进行修改. 参考代码: #define _CRT_SECURE_NO_WARNINGS #include& ...

  9. shell中echo输出换行的方法

    [~]#echo "Hello world.\nHello sea" Hello world.\nHello sea [~]#echo -e "Hello world.\ ...

  10. Error in readRDS(dest) : error reading from connection

    Error in readRDS(dest) : error reading from connection 解决办法:可能是镜像设置错误,导致无法抓取文件 修改 RStudio 中的镜像地址 设置成 ...