Vue+Axios 实现天气查询

最新推荐文章于 2024-09-20 10:38:19 发布

William_GJIN

最新推荐文章于 2024-09-20 10:38:19 发布

阅读量602

点赞数

分类专栏：网页文章标签： vue

本文链接：https://blog.csdn.net/William_GJIN/article/details/105472682

版权

网页专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、页面展示

1、初始页面

2、查询结果展示

二、代码实现

1、html

<!DOCTYPE html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="tianqi" >
    <div class="row" style="width: 40%;margin: 0px auto;margin-top: 50px;">
        <div class="col-lg-6" style="text-align: center;" >
            <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
          <div class="input-group"  style="margin-top: 20px;">
            <input v-model="city" @keyup.enter="searchWeather" type="text" class="form-control" placeholder="Search for...">
            <span class="input-group-btn">
              <button @click="changecity(city)" class="btn btn-default" type="button">查询</button>
            </span>
          </div>
          <!-- /input-group -->
        </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->
    <ul class="weatherlist" style="margin: 0px auto;width: 80%;margin-top: 60px;">
        <li v-for="item in weatherlist" style="float: left;width: 20%;list-style-type:none">
            <span style="font-size: 40px;color: #f8a05d;">{{ item.type }}</span><br>
            <span style="font-size: 10px;color: #f8a05d;">{{ item.low }}~{{ item.high }}</span><br>
            <span>{{ item.date }}</span><br>
        </li>
    </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./main.js"></script>
</body>
</html>

2、main.js

var tianqi = new Vue({
    el:"#tianqi",
    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;
            })
            .catch(function(err){
                alert("城市输入错误")
            })
        },
        changecity:function(cityin){
            this.city=cityin;
            this.searchWeather();
        }
    }
})