Implémentation de fonctions de filtrage de données et de recherche dans Vue

Implémentation de fonctions de filtrage de données et de recherche dans Vue

Dans de nombreuses applications Web, le filtrage et la recherche de données sont des fonctionnalités clés de l'expérience utilisateur. En tant que framework frontal populaire, Vue.js fournit de nombreux outils et technologies pour permettre aux développeurs d'implémenter facilement ces fonctions. Cet article explique comment implémenter le filtrage et la recherche de données dans Vue, et fournit un exemple de code pour vous aider à démarrer.

Insérer la description de l'image ici

Concepts de base du filtrage et de la recherche de données

L'objectif principal du filtrage des données et de la fonctionnalité de recherche est de filtrer les éléments d'un ensemble de données qui répondent à des critères spécifiques. Ces conditions peuvent être déterminées en fonction des entrées de l'utilisateur, des filtres sélectionnés ou d'autres paramètres. Voici quelques cas d’utilisation courants :

• Recherche textuelle : recherchez des éléments dans un ensemble de données en fonction des mots-clés saisis par l'utilisateur.

• Filtrage basé sur les conditions : filtrez les données en fonction des conditions sélectionnées par l'utilisateur (telles que la plage de dates, la fourchette de prix, etc.).

• Combinaison de plusieurs filtres : Permet aux utilisateurs d'appliquer plusieurs filtres en même temps.

Dans Vue, vous pouvez utiliser des propriétés et des méthodes calculées pour réaliser ces fonctions, ainsi que profiter de la liaison de données réactive de Vue pour mettre automatiquement à jour l'interface.

Exemple : recherche textuelle

Commençons par une simple fonction de recherche textuelle. Nous allons créer une application Vue qui contient un ensemble de données de films et permet aux utilisateurs de rechercher ces films.

Créer une application Vue

Tout d’abord, créez une application Vue. Vous pouvez utiliser Vue CLI pour configurer rapidement un nouveau projet Vue :

vue create movie-app

Préparer les données du film

Dans votre application Vue, vous avez besoin d'un tableau contenant des données de film. Vous pouvez coder en dur des données dans un composant Vue ou les obtenir à partir d'une API ou d'une source de données externe. Voici un exemple de tableau de données de film :

const movies = [
  {
    
     title: 'Movie 1', year: 2020 },
  {
    
     title: 'Movie 2', year: 2019 },
  {
    
     title: 'Movie 3', year: 2021 },
  // ... 更多电影数据
];

Créer un composant Vue

Créez un composant Vue pour afficher les données du film et le champ de recherche. Dans src/components/MovieList.vue, ajoutez le code suivant :

<template>
  <div>
    <input
      type="text"
      v-model="searchTerm"
      placeholder="Search movies..."
    />
    <ul>
      <li v-for="movie in filteredMovies" :key="movie.title">
        {
   
   { movie.title }} ({
   
   { movie.year }})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: [...], // 电影数据数组
      searchTerm: '' // 搜索关键字
    };
  },
  computed: {
    filteredMovies() {
      // 使用计算属性过滤电影数据
      return this.movies.filter(movie =>
        movie.title.toLowerCase().includes(this.searchTerm.toLowerCase())
      );
    }
  }
};
</script>

Dans le code ci-dessus, nous avons créé un composant Vue qui contient un champ de recherche et une liste de films. Utilisez v-modelune directive pour lier la valeur du champ de recherche à searchTermune propriété de données. Nous utilisons ensuite des propriétés calculées filteredMoviespour filtrer les données du film afin d'afficher uniquement les films contenant le mot-clé de recherche.

Utiliser les composants Vue

MovieListUtilisez des composants dans votre application Vue . Dans src/App.vue, ajoutez le code suivant :

<template>
  <div id="app">
    <h1>Movie Search App</h1>
    <movie-list />
  </div>
</template>

<script>
import MovieList from './components/MovieList.vue';

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

Exécutez l'application Vue

Vous pouvez maintenant exécuter votre application Vue :

npm run serve

Ouvrez votre navigateur et visitez http://localhost:8080, vous verrez une simple application de recherche de films.

Exemple : Filtrage basé sur les conditions

Examinons ensuite un exemple plus complexe dans lequel les utilisateurs peuvent filtrer les données d'un film en fonction de conditions.

Mettre à jour les composants Vue

Dans MovieList.vuele composant, ajoutez un ensemble de filtres et un bouton pour permettre aux utilisateurs de filtrer les données du film :

<template>
  <div>
    <!-- 搜索框 -->
    <input
      type="text"
      v-model="searchTerm"
      placeholder="Search movies..."
    />
    <!-- 筛选条件

 -->
    <label>
      Year:
      <select v-model="selectedYear">
        <option value="">All</option>
        <option v-for="year in uniqueYears" :value="year">{
   
   { year }}</option>
      </select>
    </label>
    <!-- 筛选按钮 -->
    <button @click="filterMovies">Filter</button>
    <!-- 电影列表 -->
    <ul>
      <li v-for="movie in filteredMovies" :key="movie.title">
        {
   
   { movie.title }} ({
   
   { movie.year }})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: [...], // 电影数据数组
      searchTerm: '', // 搜索关键字
      selectedYear: '', // 选择的年份
    };
  },
  computed: {
    filteredMovies() {
      // 使用计算属性过滤电影数据
      let filtered = this.movies;

      if (this.searchTerm) {
        filtered = filtered.filter(movie =>
          movie.title.toLowerCase().includes(this.searchTerm.toLowerCase())
        );
      }

      if (this.selectedYear) {
        filtered = filtered.filter(movie => movie.year === parseInt(this.selectedYear));
      }

      return filtered;
    },
    uniqueYears() {
      // 计算属性：获取电影数据中的唯一年份列表
      const years = new Set(this.movies.map(movie => movie.year));
      return [''].concat(Array.from(years));
    },
  },
  methods: {
    filterMovies() {
      // 当用户点击筛选按钮时调用此方法
      // 更新电影列表
    },
  },
};
</script>

Dans le code ci-dessus, nous avons ajouté un menu déroulant avec des critères de filtre qui permettent à l'utilisateur de sélectionner une année spécifique. Dans les propriétés calculées filteredMovies, nous filtrons les données du film en fonction du mot-clé de recherche et de l'année sélectionnée. uniqueYearsLa propriété calculée est utilisée pour obtenir une liste d'années uniques dans les données du film.

Mettre à jour l'utilisation des composants Vue

Dans App.vue, mettez à jour l'utilisation du composant pour inclure des filtres et des boutons :

<template>
  <div id="app">
    <h1>Movie Search and Filter App</h1>
    <movie-list />
  </div>
</template>

<script>
import MovieList from './components/MovieList.vue';

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

Exécutez l'application Vue

Exécutez l'application Vue :

npm run serve

Désormais, votre application de recherche et de filtrage de films possède encore plus de fonctionnalités. Les utilisateurs peuvent filtrer les données de films en fonction de l'année et des mots-clés de recherche.

Résumer

La mise en œuvre de fonctionnalités de filtrage de données et de recherche dans une application Vue est une tâche courante mais importante. La liaison de données réactive, les propriétés calculées et les méthodes de Vue rendent cette tâche relativement simple. Avec l'exemple de code et les conseils fournis dans cet article, vous pouvez facilement démarrer et implémenter de puissantes fonctionnalités de filtrage et de recherche de données dans votre projet Vue. J'espère que cet article vous a été utile, si vous avez des questions, n'hésitez pas à nous les poser.