這次為大家帶來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>
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
node.js和ES6的exports、module.exports使用詳解
以上是Bootrap+Vue實現仿百度搜尋介面功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
