(精华)2020年7月12日 vue 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>
	<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>
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:上身试试 返回首页