vue get请求实例获取笑话

最新推荐文章于 2023-02-07 13:19:55 发布

vue学习

最新推荐文章于 2023-02-07 13:19:55 发布

阅读量478

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44180173/article/details/104435702

版权

vue 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

写的一个简单的vue get请求

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试get实例(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  <h1>笑话列表</h1>
  <ul >
	  <li v-for="item in josarr" :key="item.id">
		 {{ item }}
	  </li>
  </ul>
<button @click="send">点击获取笑话</button>
</div>
<style>
#app {width:800px; margin:0 auto ; background:#ccc}
ul li{ width:95%; background:#eee; margin:0 auto; padding-top:10px;}
</style>
<script type = "text/javascript">
new Vue({
  el: '#app',
    data: {
    josarr: []
  },
  methods: {
    send: function () { //点击的时候加载
     axios({
        method:'get',
        url:'https://autumnfish.cn/api/joke/list?num=3',
        /*params:{
          num:3 
        }*/
     }).then(resp=>{	 
      this.josarr=resp.data.jokes	//数据赋值   
     }).catch(resp =>{
      console.log('failure');
     })
    }
  },
  mounted:function(){
    this.send(); //生命周期中  挂载完成的时候加载  也可以是created()看不同需求
  }
})
</script>
</body>
</html>

vue学习

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue get请求实例获取笑话

写的一个简单的vue get请求<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试get实例(runoob.com)</title><script src="https://cdn.staticfile.org/vue/2.4.2...
复制链接

扫一扫

专栏目录