vue(2)_this.mydata = res.data.s;-CSDN博客

本文链接：https://blog.csdn.net/stephen_numb/article/details/53956416

今天准备写一篇文章，来记录下自己学习vue的轨迹，今天准备写的是Vue几个常用的指令。想必大家都用过一些搜索网站，比如百度或者360，当用户输入关键词之后，下方会出现一些备选项，然后通过键盘的up和down就可以选择，今天我用vue实现了一下。望各位大神不吝赐教。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<style>
.gray{
background: #ccc;
}
</style>
</head>
<body>
<div class="box">
<input type="text" @keyup="get($event)" v-model="t1" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"/>
<ul>
<li v-for="value in myData" :class="{gray:now == $index}">
{{value}}
</li>
</ul>
<p v-show="myData.length == 0">暂无数据</p>
</div>
</body>
<script>
window.onload = function () {
new Vue({
el:'.box',
data:{
t1:'',
myData:[],
now:-1
},
methods:{
get:function (eve) {
if (eve.keyCode == 38 || eve.keyCode == 40) return;
if(eve.keyCode == 13) {
window.open('https://www.baidu.com/s?wd='+this.t1);
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd : this.t1
},{
jsonp:'cb'
}).then(function (res) {
this.myData = res.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>
</html>

首先获取到输入的关键词t1，然后将关键词作为参数，通过vue-resource的http请求到相应的数据，然后将数据塞进myData中，然后通过v-for指令，将数据展示出来。

这里面有几个坑，第一个，当按下up键的时候，光标会跑到input框的最前面，这时候需要禁止默认行为，禁止默认行为有两种方式，第一种就是传入一个$event，然后通过preventDefault()函数禁止默认行为，第二种就是vue大神的方法，在函数后面加上.prevent，我自己是比较倾向第二种写法的，既然选择了vue，就要融入vue的环境。第二个问题就是，当按了up或者down之后，带选项的内容也会发生变化，这是为什么呢？因为我们松开这些键的时候，触发了get()函数，所以这个时候，我们就要判断我们是松开了哪个键盘，如果松开的是up或者down按键，那么get()函数什么就不做，不会重新发起请求。如果松开的是enter键，那么就把关键词作为参数，发起请求。