Bootrap+Vue は Baidu 検索インターフェース機能の模倣を実装します

今回は、Baidu のような検索インターフェイス機能を実装するための Bootrap+Vue を紹介します。Bootrap+Vue が Baidu の検索インターフェイス機能を模倣するために実装する 注意事項 は何ですか? ここでは実際のケースを見てみましょう。

Vue を使用して Baidu の検索インターフェイスを呼び出し、簡単な検索機能を実装します。

もちろん、検索ボックスのスタイルは Bootstrap に基づいており、Baidu 検索に似るように調整されています。コードは次のとおりです

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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

AFN カプセル化ネットワークリクエストの詳細な説明

Node.js 環境変数 process.env の使用の詳細な説明

node.jsとES6のexportsとmodule.exportsの使い方を詳しく解説

以上がBootrap+Vue は Baidu 検索インターフェース機能の模倣を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。