vuejs怎麼創建並呼叫全域方法

建立並呼叫全域的方法：1、在vue專案src目錄的任意檔案下自訂方法；2、在「main.js」檔案中使用import語句引入自訂方法，並將該方法掛載到vue實例上；3、在需要的頁面，利用「$vue實例.方法名稱()」語句呼叫方法即可。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

Vue.js建立並呼叫全域方法

在vue工程中，首先在src的任意檔案下自訂一個方法，舉例如下

  transNum (num) {
    if (typeof (num) === 'undefined') {
      return 0
    } else {
      let oldNum = num.toString().trim()
      let len = oldNum.length
      if (len <= 3) {
        return num
      } else {
        let newNum = oldNum.substr(0, len - 3) + &#39;.&#39; + oldNum.charAt(len - 3) + &#39;k&#39;
        return newNum
      }
    }
  }

方式1：掛載到Vue實例上

範例：在vue工程的main.js檔案中引入該方法，並將該方法掛載到vue實例上。在main.js檔案中加入以下程式碼

import myutil from '@/common/utils/util.js'

Vue.prototype.$myutil = myutil

在使用時可以直接透過

$myutil.transNum(num)

方式2：透過import導入

在需要呼叫該方法的檔案的

import util from '@/common/utils/util.js''

方法的呼叫

util.transNum(num)

說明：

在如果要將方法的呼叫寫在{#在 ##{}}中，則只能透過第一種方式引入方法，具體原因和vue的生命週期有關，不多贅述。

相關推薦：《

vue.js教學》

以上是vuejs怎麼創建並呼叫全域方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！