Comment implémenter la requête et la recherche de données dans Vue

Comment implémenter la requête et la recherche de données dans Vue

Avec le développement d'Internet et la croissance explosive des données, la requête et la recherche de données sont devenues des besoins courants dans les projets. Dans le framework Vue.js, nous pouvons utiliser certaines techniques et outils pour implémenter des fonctions de requête et de recherche de données. Cet article présentera quelques méthodes courantes et fournira des exemples de code spécifiques.

1. Requête de données de base

Tout d'abord, introduisons une méthode de requête de données de base, qui consiste à utiliser un filtre. Le filtre filtre peut filtrer le tableau et filtrer les données qui répondent aux exigences en fonction des conditions spécifiées. Ce qui suit est un exemple d'utilisation de base :

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入要查询的关键词">
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: ['苹果', '香蕉', '橙子', '草莓'],
    };
  },
  computed: {
    filteredList() {
      return this.list.filter((item) =>
        item.includes(this.keyword)
      );
    },
  },
};
</script>

Dans le code ci-dessus, nous lions les mots-clés d'entrée à l'attribut de mot-clé dans les données via la directive v-model. Utilisez ensuite la propriété calculée filteredList pour filtrer les éléments de données contenant des mots-clés et les afficher sur la page.

2. Recherche floue

Parfois, nous devons effectuer une recherche floue, c'est-à-dire une correspondance basée sur une partie du contenu du mot clé. Dans Vue.js, nous pouvons utiliser des expressions régulières pour implémenter la recherche floue. Voici un exemple :

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入要搜索的关键词">
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: ['苹果', '香蕉', '橙子', '草莓'],
    };
  },
  computed: {
    filteredList() {
      const reg = new RegExp(this.keyword, 'i');
      return this.list.filter((item) =>
        reg.test(item)
      );
    },
  },
};
</script>

Dans le code ci-dessus, nous utilisons le constructeur RegExp pour créer un objet d'expression régulière. Parmi eux, je veux dire ignorer le cas. Ensuite, nous utilisons la propriété calculée filteredList pour filtrer les éléments de données correspondants en fonction de l'expression régulière.

3. Requête conditionnelle

Parfois, nous devons interroger en fonction de certaines conditions, pas seulement de mots-clés. Dans Vue.js, nous pouvons utiliser des propriétés calculées et des instructions v-bind pour implémenter des requêtes conditionnelles. Voici un exemple :

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入要搜索的关键词">
    <select v-model="type">
      <option value="">全部</option>
      <option value="水果">水果</option>
      <option value="蔬菜">蔬菜</option>
    </select>
    <ul>
      <li v-for="item in filteredList">{{ item.name }}（{{ item.type }}）</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      type: '',
      list: [
        { name: '苹果', type: '水果' },
        { name: '香蕉', type: '水果' },
        { name: '橙子', type: '水果' },
        { name: '萝卜', type: '蔬菜' },
        { name: '土豆', type: '蔬菜' },
      ],
    };
  },
  computed: {
    filteredList() {
      let filtered = this.list;
      
      if (this.keyword) {
        filtered = filtered.filter((item) =>
          item.name.includes(this.keyword)
        );
      }
      
      if (this.type) {
        filtered = filtered.filter((item) =>
          item.type === this.type
        );
      }
      
      return filtered;
    },
  },
};
</script>

Dans le code ci-dessus, nous avons ajouté une liste déroulante permettant de sélectionner la catégorie de la requête. En fonction des mots-clés d'entrée et des catégories sélectionnées, nous filtrons les éléments de données qui répondent aux conditions via l'attribut calculé filteredList.

Résumé

Cet article présente comment implémenter la requête et la recherche de données dans le framework Vue.js et fournit des exemples de code spécifiques. Grâce aux méthodes ci-dessus, nous pouvons gérer de manière flexible divers besoins de requêtes et de recherche. J'espère que cela aide les lecteurs.

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!