其他分享
首页 > 其他分享> > 利用Vue实现天气预报

利用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>

标签:size,city,Vue,color,height,利用,天气预报,font,left
来源: https://www.cnblogs.com/YShen0/p/15406539.html