<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-resource.js" ></script>
<style>
.grey{
background: #CCC;
height: 25px;
}
ul,li{
margin: 0;
padding: 0;
list-style-type:none;
margin-left: 65px;
width: 306px;
}
.dialog{
margin-left: 10px;
margin-top: 30px;
width: 300px;
height: 25px;
}
.note{
margin-left: 130px;
}
</style>
</head>
<body>
<script>
window.onload=function(){
new Vue({
el :"#app",
data:{
myData:[],
t1: "",
now:-1
},
methods:{
get:function(e){
if(e.keyCode==38||e.keyCode==40) return;
if(e.keyCode==13){
window.open('https://www.baidu.com/s?wd='+this.t1);
}
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
jsonp:'cb',params:{wd:this.t1}
}).then(function(_data){
this.myData=_data.data.s;
},function(){
});
},
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>
<div id="app">
<img src="img/baidu_jgylogo3.gif"/>
<input type="text" name="" id="" value="" :class="{dialog:true}" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"/>
<ul>
<li v-for="(value,index) in myData" :class="{grey:index==now}">
{{value}}
</li>
</ul>
<p v-show="myData.length==0" :class="{note:true}">暂无数据...</p>
</div>
</body>
</html>