Bootrap+Vue實現仿百度搜尋介面功能

這次為大家帶來Bootrap Vue實現仿百度搜尋介面功能，Bootrap Vue實現仿百度搜尋介面功能的注意事項有哪些，以下就是實戰案例，一起來看一下。

用Vue呼叫百度的搜尋接口，實作簡單的搜尋功能。

搜尋框的樣式是基於Bootstrap，當然對樣式做了簡單的調整， 使之類似於百度搜尋。程式碼如下

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}}
    

  

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

AFN封裝網路請求詳解

#Node.js環境變數process.env使用詳解

node.js和ES6的exports、module.exports使用詳解

以上是Bootrap+Vue實現仿百度搜尋介面功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！