在小程式裡面是沒有dom元素的,這個我們只要會小程式的應該都知道,但是在平時開發中我們偶爾會遇到需要點選某個元素獲取它的值的情況,在這裡給大家列舉了兩種情況解決方法

方式一:資料繫結

這種情況的話,對應的場景是隻有一個按鈕或元素呼叫這個方法的情況下的

在你的.vue檔案中的data資料裡面新增變數

data() {
    return {
      msg:'蘇喂蘇喂蘇喂'
    };
}
getData(){
 console.log( this.msg )
}

按鈕上

<button @click="getData()" name="bu">{{msg}}</button>
 

但是對於多個元素呼叫該方法的話,這個這種方式是不切實際的,下面第二種方法就是彌補方式一的不足

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

方式二

.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('取消')
            }
            }
          })
      }
 });