recherche

Maison  >  Article  >  interface Web  >  Vue.js 2.0 implémente le champ de recherche Baidu

Vue.js 2.0 implémente le champ de recherche Baidu

php中世界最好的语言
php中世界最好的语言original
2018-04-18 14:38:342881parcourir

Cette fois, je vous propose Vue.js 2.0 pour implémenter le champ de recherche Baidu. Quelles sont les précautions pour implémenter le champ de recherche Baidu avec Vue.js 2.0. . Jetons un coup d'oeil. 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>Vue模拟百度搜索</title>
 <style type="text/css">
 body, html{
  padding: 0;
  margin: 0;
 }
 #box{
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
 .input{
  width: 500px;
  height: 30px;
  text-indent: 4px;
 }
 .baidu input{
  height: 30px;
  cursor: pointer;
  color: #fff;
  letter-spacing: 1px;
  background: #3385ff;
  border: 1px solid #2d78f4;
 }
 ul{
  padding: 0;
  margin-top: 6px;
 }
 li{
  list-style: none;
  margin: 4px;
 }
 li:hover{
  background: #ccc;
 }
 .bgcolor {
  background: #ccc;
 }
 </style>
 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script>
 <script type="text/javascript">
 window.onload = function() {
  new Vue({
   el: '#box',
   data: {
    inputText: '',
    text: '',
    nowIndex: -1,
    result: []
   },
   methods: {
    show (ev) {
     if (ev.keyCode == 38 || ev.keyCode == 40) {
      if (this.nowIndex < -1){
       return;
      }
      if (this.nowIndex != this.result.length && this.nowIndex != -1) {
       this.inputText = this.result[this.nowIndex];
      }
      return;
     }
     if (ev.keyCode == 13) {
      window.open(&#39;https://www.baidu.com/s?wd=&#39; + this.inputText, &#39;_blank&#39;);
      this.inputText = &#39;&#39;;
     }
     this.text = this.inputText;
     this.$http.jsonp(&#39;https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su&#39;, {
      params: {
       wd: this.inputText
      },
      jsonp: &#39;cb&#39;
     }).then(res => {
      this.result = res.data.s;
     })
    },
    goto () {
     window.open('https://www.baidu.com/s?wd=' + this.inputText, '_blank');
     this.inputText = '';
    },
    gotoItem(item) {
     window.open('https://www.baidu.com/s?wd=' + item, '_blank');
     this.inputText = '';
    },
    down () {
     this.nowIndex++;
     if (this.nowIndex == this.result.length) {
      this.nowIndex = -1;
      this.inputText = this.text;
     }
    },
    up () {
     this.nowIndex--;
     if (this.nowIndex < -1){
      this.nowIndex = -1;
      return;
     }
     if (this.nowIndex == -1) {
      this.nowIndex = this.result.length;
      this.inputText = this.text;
     }
    }
   }
  });
 }
 </script>
</head>
  
<body>
 <p id="box">
 <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="270" height="129">
  <p>
   <p>
    <input
     type="text"
     class="input"
     placeholder="请输入搜索内容 "
     v-model=&#39;inputText&#39;
     @keyup=&#39;show($event)&#39;
     @keydown.down=&#39;down()&#39;
     @keydown.up.prevent=&#39;up()&#39;
    >
    <span class="baidu" @click="goto()">
     <input type="submit" value="百度一下" >
    </span>
   </p>
    
   <ul>
    <li v-for="(item, index) in result" :class=&#39;{bgcolor: index==nowIndex}&#39; @click="gotoItem(item)">
     {{item}}
    </li>
   </ul>
  </p>
 
 </p>
</body> 
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :



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：js implémente une barre d'affichage dynamique de la progression du processusArticle suivant：js implémente une barre d'affichage dynamique de la progression du processus

Articles Liés

Voir plus