vue下拉搜索

vue版本是1.0.21

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>下拉搜索框</title>
 6         <script src="vue.js"></script>
 7         <script src="vue-resource.js"></script>
 8         
 9         <style>
10             .gray{
11                 background-color: #ccc;
12             }
13         </style>
14         <script type="text/javascript">
15             window.onload = function(){
16                 new Vue({
17                     el:"body",
18                     data:{
19                         myData:[],
20                         t:"",
21                         now:-1,
22                     },
23                     methods:{
24                         get:function(e){
25                             if(e.keyCode == 38 || e.keyCode == 40 )  return;
26                             if(e.keyCode == 13){
27                                 window.open('https://www.baidu.com/s?wd='+this.t);
28                                 this.t='';
29                             }
30                             this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
31                                 wd:this.t
32                             },{
33                                 jsonp:"cb"
34                             }).then(function(res){
35                                 this.myData = res.data.s;
36                             },function(res){
37                                 alert(res.status);
38                             })
39                         },
40                         changeDown:function(){
41                             this.now++;
42                             if(this.now == this.myData.length) this.now=-1;
43                             this.t = this.myData[this.now];
44                         },
45                         changeUp:function(){
46                             this.now--;
47                             if(this.now==-2) this.now=this.myData.length-1;
48                                 this.t = this.myData[this.now];
49                         }
50                         
51                     }
52                 })
53             }
54         </script>
55     </head>
56     <body>
57         <input type="text" v-model="t" @keyup="get($event)"  @keydown.down="changeDown()" @keydown.up.prevent="changeUp()" />
58         <ul>
59             <li v-for="item in myData" :class="{gray:$index == now}">{{ item }}</li>
60         </ul>
61         <p v-show="myData.length==0">暂无数据...</p>
62     </body>
63 </html>

相关阅读:
selenium之css selector
selenium之xpath
selenium的一些概念
 HTML基础（四）JS
HTML基础（三）DOM操作
 HTML基础（二）CSS
HTML基础（一）HTML标签
 python学习笔记（六）发邮件、写日志、操作redis、导入模块
 python学习笔记（五）模块、第三方模块安装、模块导入
 python学习笔记（四）函数（下）、模块、集合
原文地址：https://www.cnblogs.com/chengyunshen/p/7195193.html