Comment utiliser le filtre TypeScript dans Vue

Avec la mise à niveau continue de la technologie de développement front-end, de plus en plus de nouvelles technologies ont été introduites dans notre travail de développement. Vue.js et TypeScript sont sans aucun doute les deux technologies les plus populaires. Cet article explique comment utiliser le filtre TypeScript dans Vue.js.

1. Principe du filtre

Le filtre filtre fourni dans Vue.js est utilisé pour formater les données, similaire au filtre tuyau dans Angular. Son principe d'implémentation est basé sur la fonction intégrée Array.prototype.filter() du langage JavaScript. Cette fonction accepte une fonction en paramètre et renvoie un nouveau tableau. Les éléments du nouveau tableau sont tous des éléments du tableau d'origine. qui remplissent les conditions spécifiées.

Dans Vue.js, nous pouvons formater les données en définissant une fonction comme paramètre de filtre. Cette fonction recevra une donnée qui doit être formatée.

2. Comment utiliser le filtre dans Vue.js

Il existe deux façons d'utiliser le filtre dans Vue.js, l'une est un filtre global et l'autre est un filtre local.

2.1 Filtre global

Le filtre global est défini sur le constructeur Vue, similaire à Vue.component() et Vue.directive(), et peut être utilisé dans la portée globale. Le code qui définit le filtre global est le suivant :

Vue.filter('filterName', function(value) {
  // 这里实现过滤器的具体逻辑
})

À ce stade, nous pouvons utiliser le filtre filterName dans toutes les instances de Vue.

2.2 Filtre local

Le filtre local est défini dans le composant Vue et ne peut être utilisé qu'à l'intérieur du composant. Le code pour définir un filtre local est le suivant :

export default {
  // ...
  filters: {
    filterName(value) {
      // 这里实现过滤器的具体逻辑
    }
  }
}

Si nous avons besoin de plusieurs filtres dans notre composant Vue, nous pouvons les définir comme suit :

export default {
  // ...
  filters: {
    filter1(value) {
      // ...
    },
    filter2(value) {
      // ...
    }
  }
}

3. Utilisez TypeScript pour définir des filtres dans Vue.js

Dans Vue. js La méthode d'utilisation de TypeScript pour définir un filtre est fondamentalement la même que celle d'utiliser JavaScript pour définir un filtre, sauf que nous devons déclarer les types sur les paramètres et renvoyer les valeurs de la fonction, afin que nous puissions profiter de la vérification de type de TypeScript. et des invites intelligentes pendant le développement.

Voici un exemple de code qui montre comment définir un filtre dans Vue.js à l'aide de TypeScript :

import Vue from 'vue';

interface IUser {
  name: string;
  age: number;
}

Vue.filter('userInfo', (value: IUser) => `${value.name}（${value.age}岁）`);

Nous définissons un filtre global nommé userInfo qui accepte un paramètre de type IUser et renvoie un type de chaîne .

4. Utilisation du filtre

La méthode d'utilisation du filtre dans le modèle de Vue.js est très simple. Il vous suffit d'appeler le filtre via le symbole "|" où les données sont liées.

Par exemple, si nous voulons convertir un nombre au format monétaire, nous pouvons l'écrire comme ceci :

<p>{{ price | currency }}</p>

price représente les données qui doivent être formatées, et la devise représente le nom du filtre global ou local que nous avons défini.

5. Résumé

L'utilisation de filtres dans les applications Vue.js peut nous aider à formater les données et à afficher une plus belle vue. En combinaison avec TypeScript, nous pouvons profiter de la commodité de la vérification de type et des invites intelligentes pendant le processus de développement.

Bien sûr, le principe est que nous devons d'abord comprendre le principe et l'utilisation des filtres avant de pouvoir les utiliser de manière plus flexible pour répondre à nos différents besoins de développement.

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!