<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-resource</title>
<style>
.current {
background-color: #ccc;
}
</style>
<script src="js/vue.js"></script>
<script src="js/vue-resource.min.js"></script>
<script>
window.onload = function () {
new Vue({
el: '#itapp',
data: {
keyword: '',
myData: [],
now: -1 //当前选中项的索引
},
methods: {
getData2() {
console.log('keydown'); //鼠标按下
},
getData(e) {
// this.$http.get(url, [options])
// this.$http.head(url, [options])
// this.$http.delete(url, [options])
// this.$http.jsonp(url, [options])
// this.$http.post(url, [body], [options])
// this.$http.put(url, [body], [options])
// this.$http.patch(url, [body], [options])
console.log('keyup'); //鼠标松开
//如果按方向键上、下,则不发请求
if (e.keyCode == 38 || e.keyCode == 40)
return;
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
params: {
wd: this.keyword
},
jsonp: 'cb'
}).then(resp => {
this.myData = resp.data.s;
});
},
changeDown() {
this.now++;
this.keyword = this.myData[this.now];
if (this.now == this.myData.length) {
this.now = -1;
}
},
changeUp() {
this.now--;
this.keyword = this.myData[this.now];
if (this.now == -2) {
this.now = this.myData.length - 1;
}
}
}
});
}
</script>
</head>
<body>
<div id="itapp">
<input type="text" v-model="keyword" @keydown="getData2()" @keyup="getData($event)" @keydown.down="changeDown"
@keydown.up.prevent="changeUp">
<ul>
<li v-for="(value,index) in myData" :class="{current:index==now}">
{{value}}
</li>
</ul>
<p v-show="myData.length==0">暂无数据....</p>
</div>
</body>
</html>
vue-resource的使用
最新推荐文章于 2024-04-29 16:49:44 发布