vue中jsonp插件的使用方法示例


Posted in Javascript onSeptember 10, 2020

通过jsonp简单获取接口数据,对了,注意下jsonp方法会自动添加callback

<template>
	<div class="sky">
		<h3>获取城市:</h3>
		<div class="skycon"></div>
	</div>
</template>

<script>
//导入jsonp插件
import jsonp from 'jsonp';

export default{
	data(){
		return {
			
		}
	},
	created(){
		//jsonp请求数据
		this.getLocation()
	},
	methods:{
		getLocation(){
			let url = "https://apis.map.qq.com/ws/location/v1/ip?key=CAABZ-AVSAQ-RDR5L-GTBDJ-HLA4O-A5FDB&output=jsonp&_=1599182599164"
			//jsonp方法会自动添加callback
			jsonp(url,{},(err,data)=>{
				//url地址 //{}参数 //(err,data)错误信息,获取的数据
				console.log(data)
			})
		}
	}
}
</script>

<style>
</style>

总结

到此这篇关于vue中jsonp插件的使用的文章就介绍到这了,更多相关vue中jsonp插件使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
详解Web使用webpack构建前端项目
Sep 23 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
微信小程序实现图片上传
May 23 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 #Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 #Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 #Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 #Javascript
vue 导出文件,携带请求头token操作
Sep 10 #Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 #Javascript
jquery实现简单每周轮换的日历
Sep 10 #jQuery
You might like
php开发文档 会员收费1期
2012/08/14 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
php压缩文件夹最新版
2018/07/18 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
js常用代码段整理
2011/11/30 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Python 登录网站详解及实例
2017/04/11 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python处理数据,存进hive表的方法
2018/07/04 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Python 忽略文件名编码的方法
2020/08/01 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
《长城》教学反思
2014/02/14 职场文书
毕业晚会主持词
2014/03/24 职场文书
竞选部长演讲稿
2014/04/26 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
迎国庆主题班会
2015/08/17 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书