Premiers pas avec le développement VUE3 : utilisation de Vue.js pour filtrer dynamiquement des listes de données

Vue.js est devenu le pilier du développement Web moderne. Il s'agit d'un framework JavaScript léger qui fournit des capacités de liaison de données et de composants, permettant aux développeurs de créer plus facilement des applications interactives. Et maintenant, la nouvelle version de Vue.js, VUE3, a également été publiée. Dans cet article, nous utiliserons VUE3 pour présenter à travers des exemples comment implémenter le filtrage dynamique des listes de données dans Vue.js.

1. Préparation

Avant de commencer ce tutoriel, vous devez installer les outils CLI pour Node.js et Vue. Vous pouvez vérifier la version via la commande suivante :

 node -v
 npm -v

Si vous utilisez actuellement une version inférieure de Node.js, vous pouvez télécharger la dernière version depuis le site officiel de Node.js. Une fois l'installation terminée, vous pouvez utiliser la commande suivante sur la ligne de commande pour installer Vue CLI :

npm install -g @vue/cli

2 Créez un projet Vue.js

Dans la ligne de commande, entrez le répertoire où se trouve le projet que vous souhaitez créer. localisé et exécutez la commande suivante :

vue create vue-demo
cd vue-demo

Après avoir exécuté la commande ci-dessus, une interface de ligne de commande interactive apparaîtra, vous permettant de personnaliser la configuration du projet. Vous pouvez choisir de configurer manuellement ou d'utiliser la configuration par défaut. Veuillez choisir en fonction de vos propres besoins.

3. Créez le composant de liste de données

Par défaut, Vue CLI générera une application Hello World. Nous devons créer un nouveau composant pour afficher la liste des données. Créez un nouveau fichier de composant List.vue dans le répertoire src/components, puis ajoutez le code suivant au composant :

<template>
  <div>
    <input type="text" v-model="search">
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["apple", "banana", "orange", "grape"],
      search: ""
    };
  },

  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.toLowerCase().includes(this.search.toLowerCase());
      });
    }
  }
};
</script>

Dans le code ci-dessus, nous définissons une liste de tableaux dans le composant pour stocker les données à afficher. Vous pouvez le remplacer par votre propre source de données. Ensuite, nous utilisons v-model pour lier les données de la zone de saisie à l'attribut de recherche dans le composant. Dans l'attribut calculé, nous définissons un attribut calculé filteredList, qui filtrera les données dans le tableau de liste en fonction de l'attribut de recherche.

4. Utiliser des composants

Dans le fichier App.vue, importez le composant List et ajoutez le HTML suivant dans le modèle :

<template>
  <div id="app">
    <List />
  </div>
</template>

<script>
import List from "./components/List.vue";

export default {
  components: {
    List
  }
};
</script>

Dans le code ci-dessus, nous avons d'abord importé le composant List, puis déclaré le composant dans le options de composants. Dans le modèle, nous avons ajouté le composant List à la page. Comme prévu, vous devriez maintenant voir votre application dans le navigateur et les zones de saisie répondant au filtrage de la liste de données en temps réel.

Résumé

Dans cet article, nous expliquons comment créer une liste de données dynamiques à l'aide de Vue.js et VUE3. Grâce à cet exemple, vous avez appris à utiliser la fonctionnalité de liaison de données bidirectionnelle et les propriétés calculées de Vue pour filtrer les données. Bien que cet exemple soit relativement simple, c'est un bon point de départ pour maîtriser Vue.js. Dans votre prochain projet, vous pourrez exploiter ce modèle pour créer des applications plus complexes.

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!