H5 vue实现百度下拉列表交互操作示例

给大家分享一篇关于vue实现百度下拉列表交互操作示例的详细介绍，希望对同学们学习HTML5开发有所帮助，下面我们一起来看一下吧。

www.jb51.net vue百度下拉列表

.gray{

background: #ccc;

}

window.function(){

new Vue({

el:‘body’,

data:{

myData:[],

t1:’’,

now:-1//按上下键，当前选中

},

methods:{

get:function(ev){

if(ev.keyCode38 || ev.keyCode40)return;

if(ev.keyCode==13){

window.open('https://www.baidu.com/s?wd=’+this.t1);

this.t1=’’;

}

this.$http.jsonp(‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su’,{

wd:this.t1

},{

jsonp:‘cb’

}).then(function(res){

this.myData=res.data.s;

},function(){

});

},

changeDown:function(){

this.now++;

if(this.now==this.myData.length)this.now=-1//走到最下面那个，就返回最上面那个;

this.t1=this.myData[this.now];//搜索框的值对应变化

},

changeUp:function(){

this.now–;

if(this.now==-2)this.now=this.myData.length-1;

this.t1=this.myData[this.now];

}

}

});

};

{}

原文链接http://kuaibao.qq.com/s/20190312A0UQ0J00