Bootrap + Vue implementiert die Nachahmung der Baidu-Suchschnittstellenfunktion

Dieses Mal werde ich Ihnen Bootrap+Vue zur Implementierung der Baidu-Suchschnittstellenfunktion vorstellen. Was sind die Vorsichtsmaßnahmen für Bootrap+Vue zur Implementierung der Baidu-Suchschnittstellenfunktion? Schauen Sie mal rein.

Verwenden Sie Vue, um die Suchoberfläche von Baidu aufzurufen und eine einfache Suchfunktion zu implementieren.

Der Stil des Suchfelds basiert auf Bootstrap. Natürlich wurde der Stil einfach angepasst, um ihn der Baidu-Suche zu ähneln. Der Code lautet wie folgt:

nbsp;html>


  <meta>
  <title>百度搜索</title>
  <style>
    .gray{
      background-color: #eee;
    }
    .listyle{
      font-size: 16px;
      line-height: 35px;
      padding-left: 16px;
    }
    .ulstyle{
      border:1px solid #ccc;
      border-top: none;
    }
  </style>
  <link>
  <script></script>
  <script></script>
  <script>
    window.onload = function(){
      new Vue({
        el: ".container",
        data: {
          myData:[],
          txt:"",
          nowIndex:-1
        },
        methods:{
          get:function(event){
            if(event.keyCode==38 || event.keyCode==40){
              return;
            }
            if(event.keyCode==13){
              window.open("https://www.baidu.com/s?wd="+this.txt);
              this.txt="";
            }
            this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
              wd:this.txt
            },{
              jsonp:"cb"
            }).then(function(res){
              this.myData=res.data.s
            },function(res){
              alert(res.status);
            });
          },
          changeDown:function(){
            this.nowIndex++;
            if(this.nowIndex==this.myData.length){
              this.nowIndex=0;
              this.txt=this.myData[0];
            }else{
              this.txt=this.myData[this.nowIndex];
            }
          },
          changeUp:function(){
            this.nowIndex--;
            if(this.nowIndex==-1){
              this.nowIndex=this.myData.length-1;
              this.txt=this.myData[this.nowIndex];
            }else{
              this.txt=this.myData[this.nowIndex];
            }
          },
          mouseOver:function(n){
            this.nowIndex=n;
            this.txt=this.myData[this.nowIndex];
          },
          getMsg:function(){
            window.open("https://www.baidu.com/s?wd="+this.txt);
            this.txt="";
          }
        }
      });
    }
  </script>


  <br>
  <p>
    </p><p>
      <input>
      <span>
        <button>搜索</button>
      </span>
    </p>
    

      
• {{item}}
    

   Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der AFN-gekapselten Netzwerkanforderungen

Detaillierte Erläuterung der Verwendung der Node.js-Umgebung Variable process.env

Detaillierte Erläuterung zur Verwendung von Exporten und module.exports von node.js und ES6

Das obige ist der detaillierte Inhalt vonBootrap + Vue implementiert die Nachahmung der Baidu-Suchschnittstellenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!