<body>
<div id="box" :class="{box:bo}">
<input class="a" type="text" @keyup='up($event)' v-model='mo' @keydown.down='down()' @keydown.up='upp()'/>
<ul v-show='arr.length!=0' :class="{ul:styl}">
<li v-for='inner in arr' :class="{et:$index==noe,'list':none}" @click='app()'> <!--类名的下标等于noe-->
{{inner}}
</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript" src="vue-resource.js" ></script>
<script>
window.οnlοad=function(){
new Vue({
el:'#box',
data:{
mo:'',
arr:[],
noe:0,
none:true,
styl:true,
bo:true
},
methods:{
up:function(ev){ //文本框改变事件
if(ev.keyCode==38||ev.keyCode==40){
return
}
if(ev.keyCode==13){//回车键指向
window.open('https://www.baidu.com/s?wd='+this.mo);
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.mo
},{jsonp:'cb'}) //这里写什么是看对象前面的命名是什么 例如cb=jQuery1102004767885801320193_1500365292808&_=1500365292811
.then(function(tr){
this.arr=tr.data.s//给数组添加数据
})
},
down:function(){ //键盘键向下指向keyClode=38
this.noe++;
if(this.noe==this.arr.length){
this.noe=0
}
this.mo=this.arr[this.noe]
},
upp:function(){//键盘键向上指向keyClode=40
this.noe--;
if(this.noe==-1){
this.noe=this.arr.length-1
}
this.mo=this.arr[this.noe]
},
}
})
}
</script>
</html>
<div id="box" :class="{box:bo}">
<input class="a" type="text" @keyup='up($event)' v-model='mo' @keydown.down='down()' @keydown.up='upp()'/>
<ul v-show='arr.length!=0' :class="{ul:styl}">
<li v-for='inner in arr' :class="{et:$index==noe,'list':none}" @click='app()'> <!--类名的下标等于noe-->
{{inner}}
</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript" src="vue-resource.js" ></script>
<script>
window.οnlοad=function(){
new Vue({
el:'#box',
data:{
mo:'',
arr:[],
noe:0,
none:true,
styl:true,
bo:true
},
methods:{
up:function(ev){ //文本框改变事件
if(ev.keyCode==38||ev.keyCode==40){
return
}
if(ev.keyCode==13){//回车键指向
window.open('https://www.baidu.com/s?wd='+this.mo);
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.mo
},{jsonp:'cb'}) //这里写什么是看对象前面的命名是什么 例如cb=jQuery1102004767885801320193_1500365292808&_=1500365292811
.then(function(tr){
this.arr=tr.data.s//给数组添加数据
})
},
down:function(){ //键盘键向下指向keyClode=38
this.noe++;
if(this.noe==this.arr.length){
this.noe=0
}
this.mo=this.arr[this.noe]
},
upp:function(){//键盘键向上指向keyClode=40
this.noe--;
if(this.noe==-1){
this.noe=this.arr.length-1
}
this.mo=this.arr[this.noe]
},
}
})
}
</script>
</html>