Comment utiliser Vue pour implémenter des effets de recherche de type Baidu

Comment utiliser Vue pour mettre en œuvre des effets de recherche de type Baidu nécessite des exemples de code spécifiques

Le moteur de recherche Baidu a toujours été l'un des moteurs de recherche les plus utilisés par les utilisateurs nationaux, et son effet de recherche unique a également apporté de grands avantages aux utilisateurs expérience. Parmi eux, l'effet de liste déroulante qui imite la recherche Baidu est également très populaire. Cet article expliquera comment utiliser Vue pour implémenter des effets de recherche de type Baidu et fournira des exemples de code spécifiques.

Tout d'abord, nous devons créer un projet Vue. Dans le fichier d'entrée du projet (main.js), introduisez Vue et les composants associés :

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

Ensuite, nous devons créer un composant nommé App.vue dans le projet pour implémenter les fonctions du champ de recherche et de la liste déroulante. Dans App.vue, nous définissons d'abord un attribut de données searchText, qui est utilisé pour lier la valeur de la zone de saisie de recherche :

<template>
  <div>
    <input type="text" v-model="searchText" @input="search">
    <ul v-show="showList">
      <li v-for="item in searchList" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      searchList: [],
      showList: false
    }
  },
  methods: {
    search() {
      if (this.searchText === '') {
        this.showList = false;
        return;
      }
      this.showList = true;
      // 调用百度搜索API获取搜索结果
      this.searchList = this.getBaiduSearchResult();
    },
    getBaiduSearchResult() {
      // 使用axios发送HTTP请求获取搜索结果
      // 注意：这里只是模拟，实际使用时应该替换为真实接口
      return axios.get('https://www.baidu.com/sugrec')
        .then(response => response.data.g);
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons l'instruction v-model pour lier de manière bidirectionnelle la valeur de l'entrée de recherche à l'attribut searchText Défini, de sorte que la valeur de searchText soit automatiquement mise à jour à chaque fois que vous entrez. En même temps, nous appelons la méthode de recherche dans l'événement input de la zone de saisie. La fonction de cette méthode est d'obtenir les résultats de la recherche et d'afficher la liste déroulante.

Dans la méthode de recherche, déterminez d'abord si la valeur du champ de recherche est vide. Si elle est vide, masquez la liste déroulante et revenez ; sinon, affichez la liste déroulante et appelez la méthode getBaiduSearchResult pour obtenir la recherche. résultats. La bibliothèque axios est utilisée ici pour envoyer des requêtes HTTP et simuler la fonction d'association de la recherche Baidu via des requêtes GET.

Enfin, nous devons introduire la bibliothèque axios dans App.vue afin d'envoyer des requêtes HTTP :

npm install axios --save

Après avoir terminé les étapes ci-dessus, nous devons utiliser le composant App dans le modèle du composant racine pour afficher la page entière structure. Modifiez le modèle du composant racine comme suit :

<template>
  <div id="app">
    <h1>仿百度搜索特效</h1>
    <App/>
  </div>
</template>

Dans le code ci-dessus, nous plaçons le composant App dans le composant racine pour l'affichage, afin que la structure de la page entière soit complétée.

Enfin, nous devons introduire des liens CDN pour Vue et les bibliothèques associées dans le projet. Vous pouvez ajouter le code suivant au fichier public/index.html :

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

À ce stade, nous avons terminé l'implémentation Vue de l'imitation de recherche Baidu. Vous pouvez exécuter le projet et saisir des mots-clés dans la zone de recherche pour obtenir un effet de liste déroulante semblable à celui d'une recherche Baidu.

En utilisation réelle, vous pouvez également utiliser CSS pour embellir le style du champ de recherche et optimiser davantage la logique et les performances du code. J'espère que cet article pourra vous aider à comprendre comment utiliser Vue pour implémenter des effets de recherche de type Baidu !

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!