使用vue-resource发送jsonp请求实例

原克技术

于 2020-09-18 00:50:15 发布

阅读量313

点赞数

文章标签： vue javascript vue.js html5 css3

本文链接：https://blog.csdn.net/weixin_44432032/article/details/108656707

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>发送AJAX请求</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:'#itany',
				data:{
					keyword:'',
					myData:[],
					now:-1 //当前选中项的索引
				},
				methods:{
					getData(e){
						//如果按方向键上、下，则不发请求
						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="itany">
		<input type="text" v-model="keyword" @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发送jsonp请求实例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>发送AJAX请求</title> <style> .current{ background-color:#ccc; } </style> <script src="js/vue.js"></script> <script
复制链接

扫一扫