vue-resource的使用

最新推荐文章于 2024-06-14 09:46:51 发布

卡姿兰大长腿

最新推荐文章于 2024-06-14 09:46:51 发布

阅读量150

点赞数

本文链接：https://blog.csdn.net/weixin_46382477/article/details/108068748

版权

vue 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

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

卡姿兰大长腿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-resource的使用

<!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> &l.
复制链接

扫一扫