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 中国語 Web サイトの他の関連記事を参照してください。