利用Vue实现天气预报
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#app{
text-align: center;
position: absolute;
left: 30%;
top:23%;
height: 300px;
width: 600px;
}
.autofocus{
position: relative;
top:20%;
height: 33px;
width: 450px;
border: 2px solid DeepSkyBlue;
font-size: 16px;
font-family: "宋体";
}
.bt1{
background-color: DeepSkyBlue;
height: 40px;
width: 80px;
position: relative;
top:19.89%;
border: none;
left: -0.8%;
font-size: 16px;
font-family: "宋体";
color: white;
}
#div1{
position:absolute;
left: 40%;
top: 8%;
}
#div2{
position: relative;
top: 22%;
left: -31%;
}
.a{
padding-left: 18px;
font-size: 14x;
font-family: "宋体";
color:black;
text-decoration: none;
}
#div3{
position: relative;
top: 40%;
left: -28%;
width: 1000px;
height: 400px;
}
.ul1{
width:800px;
height: 300px;
}
.li1{
list-style: none;
float: left;
padding-left: 80px;
height: 50px;
width: 80px;
}
.p1{
font-size: 24px;
color:coral;
}
.p2{
font-size: 14px;
color:coral;
}
.p3{
font-size: 14x;
font-family: "宋体";
color:gray;
}
</style>
<body>
<div id="div1">
<img src="../images/tianqi.jpg" alt="" class="img1">
</div>
<div id="app">
<input autofocus="autofocus" placeholder="请输入要查询的城市天气" class="autofocus"
@keyup.enter="searchweather" v-model="city">
<input type="button" value="搜 索" class="bt1" @click="searchweather()">
<div id="div2">
<a class="a" @click="changecity('北京')" href="javascript:;">北京</a>
<a class="a" @click="changecity('上海')" href="javascript:;">上海</a>
<a class="a" @click="changecity('广州')" href="javascript:;">广州</a>
<a class="a" @click="changecity('深圳')" href="javascript:;">深圳</a>
</div>
<div id="div3">
<ul class="ul1">
<li v-for="(item,index) in weatherlist" class="li1">
<p class="p1">{{item.type}}</p>
<p class="p2">{{item.low}}~{{item.high}}</p>
<p class="p3">{{item.date}}</p>
</li>
</ul>
</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
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);
that.weatherlist=response.data.data.forecast;
},function(err){
console.log(err);
})
},
changecity:function(city){
this.city=city;
this.searchweather();
}
}
})
</script>
</body>
</html>
