最近还在vue的路上匍匐前进，这个是昨天晚上看智能社的视频学习做的一个小小的demo.
百度下拉列表
先上图：
利用的是jsonp来获取的数据：
这部分代码如下：
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:this.t1
},
jsonp:'cb'
}
).then(response => {
console.log(response.body.s);
this.showData = response.body.s;
},response =>{
console.log('出错啦啦啦！')
})
加写了个键盘上下事件.
最后的效果：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .gray{ background: gray; } </style> </head> <body> <script type="text/javascript" src="js/vue.js" ></script> <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> <div id='app'> <input type="text" @keyup="getData($event)" v-model="t1" @keyup.up.prevent="changeUp()" @keydown.down="changeDown()"> <ul> <li v-for="(value,index) in showData" :class="{gray:index==now}"> {{value}} </li> </ul> </div> <script type="text/javascript"> new Vue({ el:'#app', data:{ t1:'', showData:[], now:-1 }, created(){ this.getData(); }, methods:{ getData:function(ev){ this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ params:{ wd:this.t1 }, jsonp:'cb' } ).then(response => { console.log(response.body.s); this.showData = response.body.s; },response =>{ console.log('出错啦啦啦！') }) }, changeDown:function(){ this.now++; if(this.now == this.showData.length){ this.now = -1; } this.t1 = this.showData[this.now]; }, changeUp:function(){ this.now--; if(this.now == -2){ this.now = this.showData.length-1; } this.t1=this.showData[this.now]; } }, }) </script> </body> </html>
每天学习一点点，进步一点点。