Vue实现可视化查询天气

最新推荐文章于 2024-07-25 11:33:49 发布

Ken'

最新推荐文章于 2024-07-25 11:33:49 发布

阅读量826

点赞数

分类专栏： vue学习文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/m0_58941767/article/details/125050421

版权

vue学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图如下：

代码如下：

<!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>天气查询</title>
   
    
    <link rel="stylesheet" type="text/css" href="./css/index(天知道).css" />
    <link rel="stylesheet" type="text/css" href="./css/reset.css" />

    <script src="./vue.js"></script>
</head>
<body>
    <div class="wrap" id="app">
        <div class="search_form">
          <div class="logo"><img src="img/logo.png" alt="logo" /></div>
          <div class="form_group">
            <input type="text" v-model="city"  @keyup.enter="searchWeather"   class="input_txt" placeholder="请输入查询的天气"/>
            <button class="input_sub" @click="searchWeather">
              搜 索
            </button>
          </div>
          <div class="hotkey">
            <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>
        </div>
        <ul class="weather_list">
          <li v-for="item in weatherList">
            <div class="info_type"><span class="iconfont">{{ item.type }}</span></div>
            <div class="info_temp">
              <b>{{ item.low }}</b>
              ~
              <b>{{ item.high }}</b>
            </div>
            <div class="info_date"><span>{{ item.date }}</span></div>
          </li>
        </ul>
      </div>

      <script src="https://unpkg.com/axios/dist/axios.min.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((result) => {
                        that.weatherList = result.data.data.forecast;
                   }).catch((err) => {
                        
                    });
                },
                changeCity:function(city){
                    this.city = city;
                    this.searchWeather();
                }
              }
          })
      </script>
</body>
</html>