快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

按鈕上

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

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

方式二

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

 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會(huì)是一個(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值的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

javascript屬性訪問(wèn)表達(dá)式用法分析
這篇文章主要介紹了javascript屬性訪問(wèn)表達(dá)式用法,實(shí)例分析了javascript屬性訪問(wèn)表達(dá)式的功能與使用方法,需要的朋友可以參考下
2015-04-04
IE及IE6瀏覽器中判斷JS文件加載成功失敗的方法
這篇文章主要介紹了IE及IE6瀏覽器中判斷JS文件加載成功失敗的方法,本文使用vbscript來(lái)解決這個(gè)問(wèn)題,需要的朋友可以參考下
2015-02-02
ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)，Map與其它數(shù)據(jù)結(jié)構(gòu)互相轉(zhuǎn)換操作實(shí)例詳解
這篇文章主要介紹了ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)，Map與其它數(shù)據(jù)結(jié)構(gòu)互相轉(zhuǎn)換操作,結(jié)合實(shí)例形式詳細(xì)分析了ES6中的Set和Map數(shù)據(jù)結(jié)構(gòu)的概念、原理、遍歷、去重等操作,以及Map與其它數(shù)據(jù)結(jié)構(gòu)互相轉(zhuǎn)換操作,需要的朋友可以參考下
2019-02-02
上傳的js驗(yàn)證(圖片/文件的擴(kuò)展名)
下文給大家介紹下js 驗(yàn)證上傳圖片以及怎樣控制一個(gè)上傳文件的擴(kuò)展名，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助
2013-04-04
js設(shè)置和獲取自定義屬性的方法
下面小編就為大家?guī)?lái)一篇js設(shè)置和獲取自定義屬性的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
詳解javascript實(shí)現(xiàn)自定義事件
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)自定義事件的方法，自定義事件，顧名思義，就是自己定義事件類(lèi)型，自己定義事件處理函數(shù)，javascript如何實(shí)現(xiàn)自定義事件,需要了解的朋友可以參考下
2016-01-01
JavaScript轉(zhuǎn)換農(nóng)歷類(lèi)實(shí)現(xiàn)及調(diào)用方法
農(nóng)歷是日常生活中不可或缺的一部分，它與人類(lèi)的生活息息相關(guān)，從某種程度上說(shuō)，它一直伴隨著我們，今天的任務(wù)是JavaScript轉(zhuǎn)換農(nóng)歷類(lèi)的實(shí)現(xiàn)，感興趣的你可以千萬(wàn)不要錯(cuò)過(guò)，希望本文對(duì)你有所幫助
2013-01-01
JS pushlet XMLAdapter適配器用法案例解析
這篇文章主要介紹了JS pushlet XMLAdapter適配器用法案例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10
深入理解js A*尋路算法原理與具體實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了js A*尋路算法原理與具體實(shí)現(xiàn)過(guò)程,結(jié)合實(shí)例形式詳細(xì)分析了A*尋路算法的具體概念、原理、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12
JavaScript錯(cuò)誤處理機(jī)制全面分析講解
下面小編就為大家?guī)?lái)一篇全面了解javascript中的錯(cuò)誤處理機(jī)制。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2022-10-10