利用Vue實現天氣預報
阿新 • • 發佈：2021-10-14
<!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>
<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>