微客导航 » 文章资讯 » 使用 Vue.js 仿百度搜索框的实例代码

使用 Vue.js 仿百度搜索框的实例代码

2024-02-24 02:11:03 193

整理文档，搜刮出一个使用Vue.js仿百度搜索框的实例代码，稍微整理精简一下做下分享。






Vuedemo

.bg{
background:#ccc;
}




window.onload=function(){
newVue({
el:'#box',
data:{
inputText:'',
text:'',
nowIndex:-1,
result:[]
},
methods:{
show:function(ev){
if(ev.keyCode==38||ev.keyCode==40){
if(this.nowIndex<-1){
return;
}
if(this.nowIndex!=this.result.length&&this.nowIndex!=-1){
this.inputText=this.result[this.nowIndex];
}
return;
}
if(ev.keyCode==13){
window.open('https://www.baidu.com/s?wd='+this.inputText,'_blank');
this.inputText='';
}
this.text=this.inputText;
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:this.inputText
},
jsonp:'cb'
}).then(res=>{
this.result=res.data.s;
})
},
down:function(){
this.nowIndex++;
if(this.nowIndex==this.result.length){
this.nowIndex=-1;
this.inputText=this.text;
}
},
up:function(){
this.nowIndex--;
if(this.nowIndex<-1){
this.nowIndex=-1;
return;
}
if(this.nowIndex==-1){
this.nowIndex=this.result.length;
this.inputText=this.text;
}
}
}
});
}








{{item}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

使用 Vue.js 仿百度搜索框的实例代码

热门推荐

随机推荐