vuejs でグローバル メソッドを作成して呼び出す方法

青灯夜游
リリース: 2023-01-11 09:22:33
オリジナル
4504 人が閲覧しました

グローバル メソッドを作成して呼び出す: 1. vue プロジェクトの src ディレクトリ内の任意のファイルでメソッドをカスタマイズします; 2. "main.js" ファイル内の import ステートメントを使用してカスタム メソッドを導入し、 「メソッドは vue インスタンスにマウントされます」を追加します; 3. 必要なページで、「$vue インスタンス.メソッド名()」ステートメントを使用してメソッドを呼び出します。

vuejs でグローバル メソッドを作成して呼び出す方法

このチュートリアルの動作環境: 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 &#39;@/common/utils/util.js&#39;

Vue.prototype.$myutil = myutil
ログイン後にコピー

に追加します。これを使用する場合、

$myutil.transNum(num)
ログイン後にコピー

を介して直接渡すことができます。方法 2: import を介してインポート

このメソッドを呼び出す必要があるファイルの

import util from &#39;@/common/utils/util.js&#39;&#39;
ログイン後にコピー

メソッド呼び出しで

util.transNum(num)
ログイン後にコピー
説明:

次のように書きたい場合

{{}} のメソッド呼び出しでは、最初のメソッドでのみメソッドを導入できます。具体的な理由は vue のライフサイクルに関連しているため、私が勝ちました詳細には立ち入らないでください。

関連する推奨事項:「

vue.js チュートリアル

以上がvuejs でグローバル メソッドを作成して呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート