vue案例_百度搜索下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
vue案例_百度搜索下拉菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>百度下拉菜單</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
7 <meta name="apple-mobile-web-app-capable" content="yes">
8 <meta name="apple-mobile-web-app-status-bar-style" content="black">
9 <style>
10 .gray{
11 background: rebeccapurple;
12 }
13 </style>
14 <script src="vue.js"></script>
15 <script src="vue-resource.js"></script>
16 <script>
17 window.onload=function(){
18 new Vue({
19 el:'body',
20 data:{
21 myData:[],
22 t1:'',
23 now:-1
24 },
25 methods:{
26 get:function(ev){
27 if(ev.keyCode==38 || ev.keyCode==40)return;
28
29 if(ev.keyCode==13){
30 window.open('https://www.baidu.com/s?wd='+this.t1);
31 this.t1='';
32 }
33
34 this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
35 wd:this.t1
36 },{
37 jsonp:'cb'
38 }).then(function(res){
39 this.myData=res.data.s;
40 },function(){
41
42 });
43 },
44 //下翻
45 changeDown:function(){
46 this.now++;
47 if(this.now==this.myData.length)this.now=-1;
48 this.t1=this.myData[this.now];
49 },
50 //上翻
51 changeUp:function(){
52 this.now--;
53 if(this.now==-2)this.now=this.myData.length-1;
54 this.t1=this.myData[this.now];
55 }
56 }
57 });
58 };
59 </script>
60 </head>
61 <body>
62 <div id="box">
63 <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
64 <ul>
65 <li v-for="value in myData" :class="{gray:$index==now}">
66 {{value}}
67 </li>
68 </ul>
69 <p v-show="myData.length==0">暫無數據...</p>
70 </div>
71 </body>
72 </html>
實現百度搜索下拉菜單,對接口的理解
總結
以上是生活随笔為你收集整理的vue案例_百度搜索下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IFC
- 下一篇： 路由器下面再联一个路由器怎么设置 再添加