Tutoriel de base VUE3 : Utiliser les filtres Vue.js pour encapsuler les données

Vue.js est un framework JavaScript léger doté d'une série de fonctionnalités et de fonctions pour améliorer l'efficacité du développement d'applications Web. Vue3, en tant que dernière version de Vue.js, offre aux développeurs davantage de fonctionnalités et de fonctions, notamment pour le filtrage et le tri des données. Vue.js peut encapsuler et ajuster les données via des filtres. Cet article présentera en détail comment utiliser les filtres Vue.js pour encapsuler des données.

1. Que sont les filtres Vue.js ?

Le filtre Vue.js est une technologie qui peut être utilisée pour formater les données {{expression}} dans les modèles Vue. Un filtre est similaire à un système de pipeline qui reçoit les données d'entrée, les traite et finalement envoie les données traitées vers le modèle. Les filtres Vue.js sont très flexibles et peuvent facilement s'adapter à la plupart des besoins de développement.

2. Comment utiliser les filtres Vue.js ?

Les filtres Vue.js peuvent être créés via la méthode de filtrage sur l'instance Vue.js. Vue.js utilise le symbole pipe (|) pour représenter le filtre des données, comme indiqué ci-dessous :

{{ expression | filter 2 ... }}

La formule ci-dessus indique que le filtre filter1 est appliqué en premier à l'expression data , puis transmettez la sortie dans filter2 et continuez le traitement jusqu'à ce que tous les filtres aient été appliqués.

2.1 Exemple simple de filtre Vue.js

L'exemple suivant montre comment utiliser le filtre de Vue.js pour ajuster le format de date. Dans l'exemple suivant, le paramètre Date représente une date spécifique et dateFormat représente la chaîne de format. Le paramètre Date doit être un objet Date JavaScript, ou vous pouvez utiliser une bibliothèque de dates telle que moment.js.

Vue.filter('dateFormat', function (Date, dateFormat) {
  return moment(Date).format(dateFormat);
});

var app = new Vue({
  el: '#app',
  data: {
    myDate: '2017-04-12',
    format: 'MM/DD/YYYY'
  }
})

Dans le code HTML, nous pouvons utiliser le filtre dateFormat de la manière suivante :

<div id="app">
  <p>Date: {{myDate | dateFormat(format)}}</p>
</div>

Dans le code ci-dessus, nous avons appliqué le filtre dateFormat et passé format en paramètre au filtre. Par conséquent, nous obtiendrons une date au format 12/04/2017.

2.2 Exemple de filtre composite

Plusieurs filtres Vue.js peuvent être utilisés ensemble via des "pipelines" (|), comme indiqué ci-dessous :

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('');
});

Vue.filter('capitalize', function (value) {
  return value.toUpperCase();
});

Vue.filter('reverseAndCapitalize', function (value) {
  return this.reverse(this.capitalize(value));
});

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  }
})

Dans le code ci-dessus, nous définissons 3 filtres : reverse , majuscule et reverseAndCapitalize, où reverseAndCapitalize est un filtre composé qui combine l'inversion et la capitalisation via des pipelines. Dans le code HTML, nous pouvons utiliser le filtre reverseAndCapitalize de la manière suivante :

<div id="app">
  <p>Message: {{ message | reverseAndCapitalize }}</p>
</div>

Dans le code ci-dessus, nous appliquons d'abord le filtre de capitalisation, puis inversons le filtre pour convertir la sortie en DLROW OLLEH.

3. Résumé

Le filtre Vue.js est un outil de traitement de données très puissant qui peut formater, ajuster et trier les données via des filtres. Dans cet article, nous avons présenté les bases des filtres Vue.js et fourni quelques cas d'utilisation pour expliquer davantage l'application des filtres. Si vous souhaitez en savoir plus sur Vue.js, vous pouvez consulter la documentation officielle de Vue.js pour plus de détails sur les filtres et autres fonctionnalités.

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!