<style>
* {
margin: 0;
padding: 0;
}
#mask {
width: 700px;
height: 300px;
margin: 30px auto;
text-align: center;
}
h1 {
font-weight: 300;
color: #12679e;
padding: 30px 0 20px;
}
.sousuo {
position: relative;
width: 400px;
height: 40px;
background-color: #fff;
margin: 0 auto;
border: 1px solid#399acf;
}
input {
position: absolute;
top: 2px;
left: 1px;
width: 300px;
height: 35px;
outline: none;
border: 0;
padding-left: 5px;
}
.anniu {
position: absolute;
top: 0;
right: 0;
outline: none;
width: 80px;
height: 40px;
background-color: #399acf;
border: 0;
color: #fff;
font-size: 16px;
}
.chengshi {
width: 400px;
height: 30px;
margin: 0 auto;
text-align: left;
font-size: 12px;
}
.chengshi span {
margin-right: 5px;
}
.biankuang {
padding: 0 5px;
border-left: 1px solid rgb(182, 181, 181);
border-right: 1px solid rgb(182, 181, 181);
}
.tianqi {
margin-top: 15px;
display: inline-block;
font-size: 12px;
}
.tianqi>p:nth-child(1) {
font-size: 20px;
margin-bottom: 10px;
}
.tianqi>p {
margin-top: 5px;
color: orange;
}
.tianqi>p:last-child {
margin-top: 10px;
color: #000;
}
.weatherList {
display: flex;
margin-top: 50px;
}
.weatherList li {
list-style: none;
flex: 1;
border-right: 1px solid rgb(209, 204, 204);
}
.weatherList li:last-child {
border-right: 0;
}
</style>
<body>
<div id="mask">
<h1>天知道</h1>
<div class="sousuo">
<input type="text" v-model="city" @keyup.enter="searchWeather">
<button class="anniu" @click="changeCity(city)">搜索</button>
</div>
<div class="chengshi">
<span @click="changeCity('北京')">北京</span>
<span @click="changeCity('上海')">上海</span>
<span @click="changeCity('广州')">广州</span>
<span @click="changeCity('深圳')">深圳</span>
</div>
<ul class="weatherList">
<li class="yubao" v-for="i in weatherList">
<div class="tianqi">
<p> {{ i.type }} </p>
<p>
<b> {{ i.low }} </b>
<b> {{ i.high }} </b>
</p>
<p> {{ i.date }} </p>
</div>
</li>
</ul>
</div>
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="18.main.js"></script>
</body>
var mask = new Vue({
el: "#mask",
data: {
city: '',
weatherList: []
},
methods: {
searchWeather: function() {
var that = this;
axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
.then(function(response) {
console.log(response.data.data.forecast); // 拿到网络请求库里面的天气预报数据
var tianqiyb = response.data.data.forecast;
that.weatherList = tianqiyb;
}, function(error) {
console.log(error);
})
},
changeCity: function(city) {
this.city = city;
this.searchWeather();
}
}
})