vue + axios 调取天气api
***
<!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 删除
评论
登录后参与评论
推荐阅读