Tutoriel de base de VUE3 : utiliser des filtres pour le filtrage des données

VUE3 est actuellement un framework populaire dans le développement front-end. Les fonctions de base qu'il fournit peuvent grandement améliorer l'efficacité du développement front-end. Parmi eux, les filtres sont un outil très utile dans VUE3. L'utilisation de filtres permet de filtrer, filtrer et traiter facilement les données.

Alors c'est quoi les filtres ? En termes simples, les filtres sont des filtres dans VUE3. Ils peuvent être utilisés pour traiter les données rendues afin de présenter des résultats plus souhaitables dans la page. Les filtres sont des fonctions qui peuvent être utilisées dans des modèles. Ils renvoient les résultats traités en transmettant des données et certains paramètres. En fait, de nombreuses opérations de notre développement quotidien peuvent être simplifiées grâce à des filtres.

Apprenons à utiliser les filtres pour filtrer les données.

Nous devons d'abord définir un attribut de filtres dans l'instance VUE3. Nous pouvons définir plusieurs fonctions dans cet attribut comme filtres. Un exemple simple est fourni ci-dessous. Dans l'exemple, nous utilisons la fonction de filtre de VUE3 pour convertir les données d'entrée en lettres majuscules :

<div id="app">
    <input type="text" v-model="input">
    <p>输出结果：{{input | uppercase}}</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
      data() {
        return {
          input: ''
        }
      },
      filters: {
        uppercase(val) {
          return val.toUpperCase();
        }
      }
    })

    app.mount('#app')
</script>

Dans l'exemple ci-dessus, nous utilisons d'abord v-model pour convertir Le les données d'une balise d'entrée sont liées à l'attribut d'entrée défini dans notre instance. Ensuite, un filtre est référencé dans la page avec le nom majuscule. Enfin, une fonction de filtre majuscule est définie dans l'instance VUE3. La fonction principale de cette fonction est de convertir les caractères en lettres majuscules.

Il est à noter ici que l'on peut définir plusieurs fonctions dans les filtres. En même temps, on peut également utiliser plusieurs filtres dans la même balise en ajoutant un après le nom du filtre et la. le prochain nom de filtre fera l'affaire.

En plus de la conversion de chaîne dans l'exemple ci-dessus, les filtres peuvent également être utilisés pour formater des types de données tels que des dates, des devises, des nombres, etc. Par exemple, nous pouvons utiliser une fonction de filtre pour convertir les horodatages au format d'heure standard, le code est le suivant :

<p>输出结果：{{time | timestampToDate}}</p>

...

filters: {
    timestampToDate(val) {
      const date = new Date(Number(val));
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month}-${day}`;
  }
}

Nous pouvons également implémenter une logique spéciale via des filtres, comme des prix réduits : # 🎜🎜 #

<p>输出结果：{{price | discount(0.8)}}</p>

...

filters: {
    discount(val, discountRate) {
      return val * discountRate;
  }
}

Comme le montre le code ci-dessus, la fonction de remise dans les filtres est quelque peu différente de l'exemple précédent. Elle utilise deux paramètres. Lorsqu'elle est utilisée dans le modèle, remplissez le taux de remise dans la deuxième tranche. À en juger par l'effet d'implémentation, les paramètres transmis remplaceront la valeur de val dans la fonction de filtre.

Pour résumer, l'utilisation des filtres VUE3 peut traiter facilement les données, de sorte que le formatage des données de page et le traitement logique puissent être rapidement mis en œuvre. Dans le développement réel, nous pouvons définir plusieurs fonctions de filtre différentes selon les besoins pour effectuer le traitement des données de manière plus efficace et plus pratique.

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!