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

最新推荐文章于 2024-03-16 17:09:53 发布

置顶梦想编程

最新推荐文章于 2024-03-16 17:09:53 发布

阅读量651

点赞数

CC 4.0 BY-SA版权

文章标签：程序员前端

本文链接：https://blog.youkuaiyun.com/weixin_44970764/article/details/90669979

本文介绍了在微信小程序中如何在没有DOM元素的情况下，通过数据绑定和自定义属性来实现点击按钮获取其值的方法。针对单个和多个元素的情况，提供了详细的操作步骤和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

如果有想学习web前端的程序员，加VX：TZ07900, 免费送web前端视频教程噢