Comment créer et appeler des méthodes globales dans vuejs

青灯夜游
Libérer: 2023-01-11 09:22:33
original
4490 Les gens l'ont consulté

Créez et appelez une méthode globale : 1. Personnalisez une méthode sous n'importe quel fichier du répertoire src du projet vue ; 2. Utilisez l'instruction import dans le fichier "main.js" pour introduire la méthode personnalisée et montez la méthode sur Sur l'instance vue ; 3. Sur la page requise, utilisez l'instruction "$vue instance.method name()" pour appeler la méthode.

Comment créer et appeler des méthodes globales dans vuejs

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Vue.js crée et appelle des méthodes globales

Dans le projet vue, personnalisez d'abord une méthode sous n'importe quel fichier dans src, par exemple comme suit

  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
      }
    }
  }
Copier après la connexion

Méthode 1 : Monter sur l'instance Vue

Exemple : introduisez cette méthode dans le fichier main.js du projet vue et montez cette méthode sur l'instance vue. Ajoutez le code suivant au fichier main.js

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

Vue.prototype.$myutil = myutil
Copier après la connexion

Lorsque vous l'utilisez, vous pouvez directement utiliser

$myutil.transNum(num)
Copier après la connexion

Méthode 2 : Importer

via l'importation et appeler la méthode

import util from &#39;@/common/utils/util.js&#39;&#39;
Copier après la connexion

du fichier qui doit le faire. appelez cette méthode

util.transNum(num)
Copier après la connexion

Remarque :

Si vous souhaitez écrire l'appel de méthode dans {{}}, vous ne pouvez introduire la méthode que par la première méthode. La raison spécifique est liée au cycle de vie de vue, donc je n'y vais pas. dans les détails.

Recommandations associées : "Tutoriel vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!