Vue+Axios小案例【天气预报查询】
程序员文章站
2022-07-04 11:58:05
...
一、效果演示
二、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查询天气预报</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#title{
text-align: center;
}
#app {
margin-top: 50px;
text-align: center;
}
input {
height: 30px;
line-height: 30px;
}
#btn {
display: inline-block;
background-color: firebrick;
color: white;
width: 70px;
height: 35px;
line-height: 35px;
border-radius: 2px;
margin-left:10px;
}
ul {
width: 80%;
height: 150px;
margin: 50px auto;
}
li {
width: 16%;
float: left;
list-style: none;
margin: auto 20px;
height: 100%;
background-color: aliceblue;
}
.weatherInfo{
width:100%;
height:50px;
line-height: 50px;
}
.first{
color:black;
}
.second{
color:red;
}
.third{
color:deepskyblue;
}
.low{
color:grey;
}
</style>
</head>
<body>
<h3 id="title">天气预报查询</h3>
<div id="app">
<input type="text" placeholder="请输入要查询的城市名称" @keyup.enter="queryWeather" v-model="city">
<div @click="queryWeather" id="btn">查询</div>
<ul id="weather">
<li v-for="w in weatherArr">
<div class="weatherInfo first">
{{w.date}} {{w.type}}
</div>
<div class="weatherInfo second">
<span class="low">{{w.low}}</span> ~ <span class="high">{{w.high}}</span>
</div>
<div class="weatherInfo third">
{{w.fengxiang}} {{w.fengli.substr(9,2)}}
</div>
</li>
</ul>
</div>
</body>
<script>
// 请求地址:http://wthrcdn.etouch.cn/weather_mini
// 请求方法:get
// 请求参数:city (要查询的城市名称)
// 响应内容:天气信息
new Vue({
el: "#app",
data: {
city: '',
weatherArr: []
},
methods: {
queryWeather() {
var ct = this.city;
var t = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini", { params: { "city": ct } }).then(
function (response) {
t.weatherArr = response.data.data.forecast;
//console.log(response.data.data.forecast)
var fengli = response.data.data.forecast[0].fengli
//alert(fengli.substr(9,2))
}, function (error) {
}
)
}
}
})
</script>
</html>
三、相关说明
上一篇： Vue学习笔记6-axios + vue / 案例：查询天气
下一篇： OpenGL 基础变化(四)