vue + axios 调取天气api

kirin

发布于 2020-05-09 15:55:59

2K0

发布于 2020-05-09 15:55:59

文章被收录于专栏：Kirin博客

***
 <!DOCTYPE html>
 <html lang=”en”>
 <head>
 <meta charset=”UTF-8″>
 <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
 <script src=”https://unpkg.com/axios/dist/axios.min.js”></script>
 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
 <title>天气知道天气查询</title>
 </head>
 <body>
 <div id=”dd”>
 <input type=”text” v-model=’city’ @keyup.enter=’seraec’><input type=”button” value=’搜索’ @click=’seraec’>
 <a href=”” @click=”ge(‘广州’)”>广州</a>
 <ul v-for=’item in ser.forecast’>
 <li >
 <p>{{item.date}}</p>
 <p>{{item.low}}~{{item.high}}</p>
 <p>{{item.fengxiang}}</p>
 <p>{{item.type}}</p>
 </li>
 </ul>
 </div>
 <!– 接口地址 http://wthrcdn.etouch.cn/weather_mini –>
 </body>
 <script>
 var app=new Vue({
 el:’#dd’,
 data:{
 city:”,
 ser:[],
 },
 methods:{
 seraec:function(){
 var th=this;
console.log(this.city);
 axios.get(‘http://wthrcdn.etouch.cn/weather_mini?city=’+ this.city)
 .then(function(response){
 console.log(response.data.data.forecast)
 th.ser=response.data.data;
 console.log(th.ser)
},function(err){
 console.log(err)
})
},
 ge:function(city){
 this.city=city;
 this.seraec();
 },
 },
 })
 </script>
 </html>
 ***

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/04/14 ，如有侵权请联系 cloudcommunity@tencent.com 删除

api