Bootrap+Vue는 Baidu 검색 인터페이스 기능 모방을 구현합니다.

이번에는 Baidu와 유사한 검색 인터페이스 기능을 구현하기 위해 Bootrap+Vue를 가져왔습니다. Baidu 검색 인터페이스 기능을 모방하기 위해 Bootrap+Vue가 구현하는 노트는 무엇인가요?

Vue를 사용하여 Baidu의 검색 인터페이스를 호출하여 간단한 검색 기능을 구현하세요.

검색창의 스타일은 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의 내보내기 및 module.exports 사용에 대한 자세한 설명

위 내용은 Bootrap+Vue는 Baidu 검색 인터페이스 기능 모방을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!