recherche

Maison  >  Article  >  interface Web  >  Explication détaillée de l'implémentation interactive de vue 1.x de la liste déroulante de type Baidu

Explication détaillée de l'implémentation interactive de vue 1.x de la liste déroulante de type Baidu

小云云
小云云original
2018-01-04 10:41:581223parcourir

Vue lui-même ne prend pas en charge l'interaction. Si vous souhaitez interagir, vous devez introduire le module ajax. L'équipe vue fournit un nouveau fichier de bibliothèque appelé vue-resource.js. Cet article présente principalement l'exemple d'imitation de la liste déroulante Baidu dans Vue 1. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Classification de l'utilisation

l'interaction ajax est généralement divisée en 3 catégories, get, post, jsonp

partie html Code : Les données du tableau myData sont affichées via la liste ul, à l'aide de la commande "v-for" 


<body> 
    <p id="box">
      <input type="text" value="" v-model="m" @keyup="get()">
      {{m}}<br/>
      {{msg}}<br/>
      {{&#39;welcome&#39;|uppercase}}
      <ul>
        <li v-for="value in myData">
          {{value}}
        </li>
      </ul>
      <p v-show="myData.length == 0">暂无数据</p>
    </p> 
</body>

1) get request 


methods:{
  get: function(){
    this.$http.get(&#39;search&#39;,{
      wd:this.m
  }).then(function(res){
  this. myData= res.body
  },function(res){
  console.log(res.status)
})
}
  }

2) demande de publication 


methods:{get : function () {
          this.$http.post(&#39;search&#39;,{
            wd:this.m
          },{
            emulateJSON:true,   //在get 请求的基础上添加了第3个参数
          }).then(function(res){
            this.myData=res.body;
          },function(res){
            console.log(&#39;err---&#39;);
            // alert(2)
            //this.myData = [&#39;aaa&#39;, &#39;a111&#39;, &#39;a222&#39;];
          })
          
        }}

Dans le projet en arrière-plan, les résultats du débogage sont les suivants :

Après avoir entré le mot-clé "a", entrez le point d'arrêt et obtenez les données :

3) jsonp peut envoyer des cross- requêtes de domaine et n'est pas beaucoup utilisé Je n'entrerai pas dans les détails ici

2. Résumé :

Cet article nécessite de maîtriser la méthode d'écriture de get. et postez des requêtes, des données de liaison bidirectionnelles v-model, dans la liste Utilisez v-for pour afficher les données du tableau, v-show suivi de conditions pour contrôler si les données sont affichées

Recommandations associées :

Bootrap et Vue pour imiter Baidu Exemple de fonction de recherche

Explication détaillée de la façon dont PHP et Ajax peuvent imiter le drop de requête Baidu- vers le bas du contenu

Partagez un exemple de code JavaScript imitant la fonction de pagination 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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Partager les méthodes internes des composants parents appelant des composants enfants dans vue.jsArticle suivant：Partager les méthodes internes des composants parents appelant des composants enfants dans vue.js

Articles Liés

Voir plus