天气应用
Vue+axios
功能：
1.输入城市搜索相关天气功能(v-on enter v-model axios get that=this v-for [])
2.点击城市名切换该城市天气(this.city=city 调用 1 中函数)
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<title>天知道</title>
<style>
.wrap {
width: 600px;
margin: 20px auto 0;
}
.wrap header {
text-align: center;
font-size: 30px;
color: blue;
margin-bottom: 20px;
}
form {
width: 100%;
}
form input {
width: 78%;
height: 50px;
border: 1px solid blue;
}
form button {
width: 20%;
height: 50px;
line-height: 50px;
border: none;
font-size: 18px;
color: #fff;
text-align: center;
background-color: rgb(40, 136, 245);
}
footer {
display: flex;
margin-top: 30px;
}
li {
list-style-type: none;
}
</style>
</head>
<body>
<div class="wrap" id="sky">
<header>天知道</header>
<main>
<form action="#">
<input @keyup.enter="searchWeather" v-model="city" type="text" placeholder="请输入城市">
<button>搜索</button>
<div>
<a href="javascript:;" @click="changeCity('北京')">北京</a>
<a href="javascript:;" @click="changeCity('上海')">上海</a>
<a href="javascript:;" @click="changeCity('广州')">广州</a>
<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
</div>
</form>
</main>
<footer>
<ul>
<li v-for="item in weatherList">
<div>
<strong>{{item.type}}</strong>
<span>{{item.low}}</span>
<span>{{item.high}}</span>
</div>
</li>
</ul>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let app = new Vue({
el: "#sky",
data: {
city: '',
weatherList: []
},
methods: {
searchWeather: function() {
let that = this;
axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city).then(function(response) {
that.weatherList = response.data.data.forecast
})
.catch(function(err) {})
},
changeCity: function(city) {
this.city = city;
this.searchWeather();
}
}
})
</script>
</body>
</html>
