Tutoriel de base VUE3 : Utilisation des filtres Vue.js pour traiter les données de table

Vue.js est un framework JavaScript très populaire qui peut nous aider à créer des applications Web hautes performances et maintenables. Dans Vue.js, les filtres sont un outil très utile pour travailler avec des données, en particulier lorsque vous travaillez avec des données tabulaires. Cet article explique comment utiliser les filtres Vue.js pour traiter les données tabulaires.

1. Présentation des filtres Vue.js

Les filtres sont un moyen de traitement des données qui nous permet de convertir les données d'entrée dans le format de sortie requis. Dans Vue.js, les filtres sont des fonctions globales ou des fonctions d'instance Vue qui peuvent être utilisées dans les modèles lorsque les données doivent être transformées.

Les filtres Vue.js sont de deux types : les filtres globaux et les filtres locaux. Les filtres globaux peuvent être utilisés globalement, les filtres locaux ne peuvent être utilisés que dans une instance Vue.

2. Utilisez le filtre Vue.js pour traiter les données du tableau

Supposons que nous ayons un tableau contenant des données utilisateur, qui incluent le nom d'utilisateur, l'adresse e-mail et la date d'inscription. Nous souhaitons formater la date d'inscription et trier le tableau par date d'inscription.

Tout d'abord, définissez un filtre global dateFilter dans l'instance Vue :

Vue.filter('dateFilter', function(value) {
  if (!value) return ''
  return moment(value).format('YYYY/MM/DD')
})

Dans le code ci-dessus, nous utilisons la bibliothèque moment.js pour convertir la chaîne de date en un objet date et utilisons la méthode format() pour la formater comme ' Format AAAA/MM/JJ.

Ensuite, utilisez le filtre dans le modèle du formulaire :

<table>
  <thead>
    <tr>
      <th>用户名</th>
      <th>邮箱</th>
      <th @click="sortTable('registerDate')">注册日期</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="user in sortedUsers">
      <td>{{ user.name }}</td>
      <td>{{ user.email }}</td>
      <td>{{ user.registerDate | dateFilter }}</td>
    </tr>
  </tbody>
</table>

Dans le code ci-dessus, nous utilisons le caractère pipe '|' pour transmettre le champ registerDate de l'utilisateur au filtre dateFilter. Vue appellera automatiquement la fonction dateFilter, en passant registerDate comme paramètre.

Notez que lors de l'utilisation de filtres dans des modèles, l'ordre dans lequel ils sont traités peut affecter les résultats. Dans le code ci-dessus, nous trions d'abord le tableau par date d'enregistrement (sortedUsers), puis formatons la date.

Ensuite, nous devons implémenter la méthode sortTable(). Cette méthode trie le tableau en fonction du titre d'en-tête cliqué.

sortTable(column) {
  if (this.sortColumn === column) {
    this.sortOrder = this.sortOrder * -1
  } else {
    this.sortColumn = column
    this.sortOrder = 1
  }
  this.users.sort((a, b) => {
    let x = a[column]
    let y = b[column]
    if (column === 'registerDate') {
      x = moment(x)
      y = moment(y)
    }
    if (x < y) {
      return -1 * this.sortOrder
    } else if (x > y) {
      return 1 * this.sortOrder
    } else {
      return 0
    }
  })
}

Dans le code ci-dessus, nous utilisons la méthode sort() pour trier le tableau. Si le nom de la colonne est « registerDate », nous convertissons la chaîne de date en un objet date et trions par objet date.

Enfin, nous devons définir les données des utilisateurs dans l'instance Vue et charger les données utilisateur dans la fonction créée().

data: {
  users: [],
  sortColumn: '',
  sortOrder: 1
},
created() {
  axios.get('/api/users').then(response => {
    this.users = response.data
  })
}

Dans le code ci-dessus, nous utilisons Axios pour charger les données utilisateur à partir du serveur backend.

3. Résumé

Le filtre Vue.js est un outil très utile qui peut nous aider à traiter différents types de données. Dans cet article, nous avons expliqué comment utiliser les filtres Vue.js pour traiter les données tabulaires. Nous définissons un filtre global qui convertit la chaîne de date dans un format spécifié et utilisons ce filtre pour convertir les données de date d'enregistrement de l'utilisateur. De plus, nous avons également présenté comment implémenter la fonction de tri du tableau. En étudiant cet article, je pense que vous avez compris l'utilisation de base des filtres Vue.js et j'espère qu'il vous sera utile pour vos futurs travaux 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!