/*data数据*/ data:{ myData:[], t1:"", now:-1 } /*上下键的方法*/ 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]; }
完整代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初识vue</title> <link type="text/css" href="https://www.jb51.net/css/bootstrap.min.css" /> <style type="text/css"> .gray{ background-color: gray; } </style> </head> <body> <div> <input type="text" v-model="t1" @keyup="search($event)" @keydown.down.prevent="changeDown($event)" @keydown.up.prevent="changeup()"/> <ul> <li v-for="(value, index) in myData" :class="{gray:index==now}">{{value}}</li> </ul> <p v-show="myData.length==0">暂无数据...</p> </div> </body> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.jb51.net/js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.jb51.net/js/vue-resource.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // new Vue({ el:"#box", data:{ myData:[], t1:"", now:-1 }, methods:{ search: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" //callback名字，默认是callback }).then(function(response){ this.myData=response.data.s },function(response){ alert(response.status) } ) }, 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]; } } }) </script> </html>