Comment utiliser le filtre Vue pour filtrer le montant

Vue.js est un framework JavaScript rapide et flexible et le premier choix pour créer des applications Web modernes. Dans Vue.js, nous pouvons créer des composants réutilisables, mettre à jour le DOM à la demande et ajouter facilement des filtres pour gérer différentes données. Dans cet article, nous verrons comment filtrer les montants à l'aide des filtres Vue.

Les filtres Vue.js offrent un moyen simple de manipuler le formatage du texte. Vuejs nous permet de filtrer automatiquement les données lors de leur affichage et de les afficher dans le format souhaité par l'utilisateur, comme le format monétaire. L'utilisation de filtres peut rendre notre code plus simple et plus propre, et peut nous aider à réduire la duplication de code.

Les filtres font partie de l'instance Vue.js et peuvent être utilisés dans les modèles. L'utilisation de filtres dans les modèles Vue.js est simple, utilisez simplement le symbole de pipe (|) dans le modèle pour diriger les données vers la fonction de filtre. Voici un exemple simple d'utilisation du filtre de devises :

<template>
  <div>
    <p>原始金额：{{ amount }}</p>
    <p>格式化后的金额：{{ amount | currency }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 1234.56,
    }
  },
  filters: {
    currency(value) {
      return `$${value.toFixed(2)}`
    },
  },
}
</script>

Dans le code ci-dessus, nous avons défini un composant et déclaré une variable appelée montant. Nous transmettons la valeur de la variable montant dans une fonction de filtre appelée devise et utilisons la méthode toFixed() pour la conserver à deux décimales et la préfixer d'un signe dollar.

Lorsque le composant est instancié, Vue.js reconnaîtra automatiquement la fonction de devise et l'enregistrera comme filtre. Lorsque nous l'utilisons dans un modèle, nous pouvons diriger le montant vers le filtre de devise, puis le montant sera affiché sur la page sous une forme formatée.

Les filtres Vue.js sont appelés à l'aide du caractère barre verticale ( | ). Nous pouvons utiliser plusieurs filtres sur le même élément, par exemple :

<p>{{ amount | currency | capitalize }}</p>

Dans le code ci-dessus, Vue.js appliquera les filtres de devise et de capitalisation dans l'ordre, puis restituera les résultats sur la page.

Définir des filtres dans Vue.js est très simple, il suffit de déclarer un objet filtres dans le composant et d'y ajouter la fonction filtre. Par exemple :

<script>
export default {
  data() {
    return {
      amount: 1234.56,
    }
  },
  filters: {
    currency(value) {
      return `$${value.toFixed(2)}`
    },
    capitalize(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    },
  },
}
</script>

Comme mentionné ci-dessus, nous avons déclaré un objet appelé filtres et lui avons ajouté deux fonctions de filtre : devise et majuscule. Dans le modèle, nous pouvons utiliser ces filtres dans l'ordre pour restituer les données formatées.

Résumé :

Les filtres Vue.js offrent un moyen simple de manipuler le formatage du texte. Les filtres peuvent nous aider à afficher de meilleures données tout en rendant notre code plus concis et plus lisible. Définir des filtres dans Vue.js est très simple, il suffit de déclarer un objet filtres dans le composant et d'y ajouter la fonction filtre. L'utilisation de filtres peut rendre notre code plus simple et plus propre, et peut nous aider à réduire la duplication de code.

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!