小程序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('取消')
            }
            }
          })
      }
 });