利用vue+axios调用api做一个获取笑话页面

简单利用axios+vue调用api案例

点击按钮获取笑话

笑话api：https://autumnfish.cn/api/joke

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/axios.min.js"></script><script src="./js/vue.js"></script><style>#app{position: relative;left: 600px;top: 200px;}#app>#xw{width: 500px;height: 300px;background-color: gray;border-radius: 10px;}#app>#xw>p{margin-left: 6px;padding: 9px;}</style>
</head>
<body><div id="app"><div id="xw"><p> &ensp;&ensp;{{joke}}</p></div><input type="button" value="获取笑话" @click="getJoke" style="border: 1px solid red; margin-left: 190px;margin-top: 10px;"></div><script>var app = new Vue ({el:"#app",data:{joke:"很好笑的笑话"},methods:{getJoke:function(){var that = this;axios.get("https://autumnfish.cn/api/joke").then(function(response){console.log(response.data);that.joke = response.data;},function(err) { })}}})</script>
</body>
</html>

利用vue+axios调用api做一个获取笑话页面相关推荐

如何使用iview的upload实现vue自定义上传做一个可复用页面
上传实例先看视频
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
【100个 Unity踩坑小知识点】| Unity调用API ，动态获取Android权限，附带所有Android权限表格
Unity 小科普老规矩,先介绍一下 Unity 的科普小知识: Unity是实时3D互动内容创作和运营平台 . 包括游戏开发.美术.建筑.汽车设计.影视在内的所有创作者,借助 Unity 将创意 ...
使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API（代码可直接运行）
使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API(代码可直接运行) 代码很简单,适合初学者学习借鉴.可以当成一个小工具使用. 注意: 1.代码应联网使用. 2.在输入密钥和id时 ...
Python调用API打造一个语音合成系统（百度智能云）
Python调用API打造一个语音合成系统(百度智能云) 将文字转换成各种不同味道(大叔型,萝莉音,精神小伙型等)的语音. 申请一个百度智能云账号使用Python开发一款智能语音合成系统,所以需要P ...
vue中使用echarts做一个雷达图
在vue中使用echarts做一个雷达图效果如图首先 1.安装echarts npm install echarts -S 2.使用全局使用在main.js中 // 引入echarts imp ...
(Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能
利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲 ...
python秒表模块_利用python的kivy模块做一个秒表
Kiy是一个开源的Python模块库,用于开发界面应用程序和其它采用自然用户界面的多点触控应用软件.它可以在Android,iOS,Linux,OS X和Windows执行,是一款有趣跨平台的模块库. ...
利用快递100的接口做一个快递信息查询
如何在自己的网站上做一个快递的查询? 通过简单的快递100 api 即可做一个自己的快递查询工具代码范例: 具体代码教程: https://cybozudev.kf5.com/hc/kb/artic ...

利用vue+axios调用api做一个获取笑话页面

利用vue+axios调用api做一个获取笑话页面相关推荐

最新文章

热门文章