微信小程序mpvue點(diǎn)擊按鈕獲取button值的方法

更新時(shí)間：2019年05月29日 14:20:38 作者：Cynthia-milk

這篇文章主要介紹了小程序mpvue點(diǎn)擊按鈕獲取button值的方法，本文通過兩種方法，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

在小程序里面是沒有dom元素的,這個(gè)我們只要會小程序的應(yīng)該都知道,但是在平時(shí)開發(fā)中我們偶爾會遇到需要點(diǎn)擊某個(gè)元素獲取它的值的情況,在這里給大家列舉了兩種情況解決方法

方式一:數(shù)據(jù)綁定

這種情況的話,對應(yīng)的場景是只有一個(gè)按鈕或元素調(diào)用這個(gè)方法的情況下的

在你的.vue文件中的data數(shù)據(jù)里面添加變量

 data() {
  return {
   
   msg:'蘇喂蘇喂蘇喂'

  };
getData(){
 console.log( this.msg )
}

按鈕上

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

但是對于多個(gè)元素調(diào)用該方法的話,這個(gè)這種方式是不切實(shí)際的,下面第二種方法就是彌補(bǔ)方式一的不足

方式二

.vue文件的data中定義一個(gè)變量來接收

 data() {
  return {
   concat:'12345678'
  };

在template中,自定義屬性data-text

<van-cell-group>
   <van-cell title="電話" value="點(diǎn)擊撥打" data-text="*******" icon="phone" />
   <van-cell title="微信" value="點(diǎn)擊復(fù)制" data-text="********" icon="chat" @click="copy($event)"/>
   <van-cell title="郵箱" value="點(diǎn)擊復(fù)制" data-text="*******" @click="copy($event)" icon="invition"/>
   <van-cell title="博客" value="點(diǎn)擊復(fù)制" data-text="******
" icon="desktop-o" @click="copy($event)"/>
  </van-cell-group>

函數(shù)引用的時(shí)候記得一定要傳入$event,不然的話,獲取到的e會是一個(gè)undefined

定義函數(shù)

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: '復(fù)制成功',
      success: function (res) {
      if (res.confirm) {
       console.log('確定')
      } else if (res.cancel) {
       console.log('取消')
      }
      }
     })
   }
 });

總結(jié)

以上所述是小編給大家介紹的微信小程序mpvue點(diǎn)擊按鈕獲取button值的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

實(shí)例解析ES6 Proxy使用場景介紹
本篇文章主要介紹了ES6 Proxy使用場景介紹，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
JavaScript優(yōu)化專題之Loading and Execution加載和運(yùn)行
這篇文章主要介紹了JavaScript優(yōu)化專題中Loading and Execution加載和運(yùn)行的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-01-01
基于JS實(shí)現(xiàn)仿京東搜索欄隨滑動(dòng)透明度漸變效果
這篇文章主要介紹了基于JS實(shí)現(xiàn)仿京東搜索欄隨滑動(dòng)透明度漸變效果,代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-07-07
jquery form表單獲取內(nèi)容以及綁定數(shù)據(jù)
這篇文章主要介紹了jquery form表單獲取內(nèi)容以及form表單綁定數(shù)據(jù)，獲取表單的數(shù)據(jù)保存到數(shù)據(jù)庫，或者將數(shù)據(jù)綁定到form表單，感興趣的小伙伴們可以參考一下
2016-02-02
詳解webpack和webpack-simple中如何引入css文件
這篇文章主要介紹了詳解webpack和webpack-simple中如何引入css文件，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-06-06
js實(shí)現(xiàn)圖片上傳并正常顯示
這篇文章主要介紹了js實(shí)現(xiàn)圖片上傳并正常顯示，我們經(jīng)常遇到上傳照片的情況，如何實(shí)現(xiàn)圖片上傳，本文為大家進(jìn)行揭曉，感興趣的小伙伴們可以參考一下
2015-12-12
js實(shí)現(xiàn)上傳圖片預(yù)覽方法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳照片預(yù)覽的方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
前端獲取用戶ip信息幾種常見的方法
這篇文章主要介紹了幾種在前端頁面獲取用戶IP地址的方法,包括使用第三方服務(wù)、WebRTC API和服務(wù)器端獲取,每種方法都有其優(yōu)缺點(diǎn),需要根據(jù)具體需求和場景選擇合適的方法,需要的朋友可以參考下
2025-02-02
JS頁面延遲執(zhí)行一些方法(整理)
一般在JS頁面延遲執(zhí)行一些方法，本文整理了一些，大家可以嘗試操作下
2013-11-11
JavaScript 限制文本框不可輸入英文單雙引號的方法
這篇文章主要介紹了JavaScript 限制文本框不可輸入英文單雙引號的方法的相關(guān)資料,需要的朋友可以參考下
2016-12-12