最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Vue 仿百度搜索功能实现代码
时间:2017-04-10 编辑:简简单单 来源:一聚教程网
无上下选择
代码如下 | 复制代码 |
window.onload =function(){ varvm =newVue({ el:'#box', data:{ myData:[], t1:'' }, methods:{ get:function(){ this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd:this.t1 },{ jsonp:'cb' }).then(function(res){ this.myData=res.data.s },function(){ }); } } }); }
暂无数据... |
加上上下选择
代码如下 | 复制代码 |
.gray{ background:#ccc; }
window.onload=function(){ newVue({ el:'body', data:{ myData:[], t1:'', now:-1 }, methods:{ get:function(ev){ if(ev.keyCode==38||ev.keyCode==40){ 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]; } } }); };
暂无数据... |
-
下一个: js+html制作简单验证码
相关文章
- 百度极速版邀请码如何填写 百度极速版邀请码填写方法 08-22
- 百度app春晚抢红包活动玩法有哪些 百度app春晚抢红包活动介绍 01-29
- 百度电力分1亿现金红包怎么集 百度集电力分红包活动参加教程 12-21
- 六六吐槽百度是怎么回事 六六为何要吐槽百度 09-06
- 百度集书签剑侠书签怎么得 百度集书签活动介绍 08-24
- 百度红包摇摇乐怎么玩 手机百度红包摇摇乐哪里可以玩 08-23