<!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>