<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="../../plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <script src="./vue.js"></script> <script src="./vue-resource.js"></script> <script src="../../plugins/jquery-1.9.1.min.js"></script> <script src="../../plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <title>Vuejs2.0 demo</title> <title>Title</title> <style type="text/css"> .gray{ background:red; } </style> </head> <body> <div id="app"> <input type="text" value="{{keyword}}" class="form-control" v-model="keyword" @keyup="get($event);" @keydown.down="changeDown()" @keydown.up="changeUp()"> <ul> <li v-for="(value,index) in mydata" :class="{gray:index==now}"> {{value}} </li> </ul> <p v-show="mydata.length==0">暂无数据...</p> </div> <script> window.onload =function(){ var mv = new Vue({ el:"#app", data:{ mydata:[], keyword:"", now:-1 }, methods:{ get:function (ev) { if(ev.keyCode==38 || ev.keyCode==40){ return false; } this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{wd:this.keyword},{jsonp:"cb"}).then(function(res){ this.mydata = res.data.s; console.log("成功"); },function(){ console.log("失败"); }); }, changeDown:function(){ this.now++; if(this.now==this.mydata.length){ this.now = -1; } this.keyword = this.mydata[this.now]; }, changeUp:function(){ this.now--; if(this.now==-2){ this.now = this.mydata.length-1; } this.keyword = this.mydata[this.now]; } } }); }; </script> </body> </html>