Heim > Web-Frontend > Front-End-Fragen und Antworten > So erstellen und rufen Sie globale Methoden in VueJS auf

So erstellen und rufen Sie globale Methoden in VueJS auf

青灯夜游
Freigeben: 2023-01-11 09:22:33
Original
4540 Leute haben es durchsucht

Erstellen und rufen Sie eine globale Methode auf: 1. Passen Sie eine Methode unter einer beliebigen Datei im src-Verzeichnis des Vue-Projekts an. 2. Verwenden Sie die Importanweisung in der Datei „main.js“, um die benutzerdefinierte Methode einzuführen und die Methode bereitzustellen Auf der vue-Instanz; 3. Verwenden Sie auf der erforderlichen Seite die Anweisung „$vue-Instanz.Methodenname()“, um die Methode aufzurufen.

So erstellen und rufen Sie globale Methoden in VueJS auf

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Vue.js erstellt und ruft globale Methoden auf

Passen Sie im Vue-Projekt zunächst eine Methode unter einer beliebigen Datei in src an, zum Beispiel wie folgt

  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
      }
    }
  }
Nach dem Login kopieren

Methode 1: Auf der Vue-Instanz bereitstellen

Beispiel: Führen Sie diese Methode in die Datei main.js des Vue-Projekts ein und mounten Sie diese Methode in der Vue-Instanz. Fügen Sie der main.js-Datei den folgenden Code hinzu:

import myutil from &#39;@/common/utils/util.js&#39;

Vue.prototype.$myutil = myutil
Nach dem Login kopieren

Wenn Sie ihn verwenden, können Sie

$myutil.transNum(num)
Nach dem Login kopieren

Methode 2: Importieren

direkt verwenden und die

import util from &#39;@/common/utils/util.js&#39;&#39;
Nach dem Login kopieren

-Methode der Datei aufrufen, die benötigt wird Rufen Sie diese Methode auf ins Detail.

Verwandte Empfehlungen: „

vue.js Tutorial

{{}}

Das obige ist der detaillierte Inhalt vonSo erstellen und rufen Sie globale Methoden in VueJS auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage