利用vue+axios实现简单天气查询

最新推荐文章于 2024-07-09 11:18:19 发布

Record growth...

最新推荐文章于 2024-07-09 11:18:19 发布

阅读量964

点赞数 2

分类专栏： Vue 文章标签： HTML Vue.js Axios 天气查询前端开发

本文链接：https://blog.csdn.net/weixin_44239550/article/details/128374038

版权

Vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

一、代码：

<!DOCTYPE html>
<html>
<head>
    <title>天气查询案例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
<body>
    <div class="container mt-5">
        
        <div id="app" class="d-flex flex-column">
            <div class="d-flex justify-content-center">
                <h3 class="d-inline">天气查询</h3>
            </div> 
            <div class="d-flex justify-content-center mt-4">
                <input type="text" class="form-control col-5" placeholder="输入城市名称然后回车..." v-model="city"  @keyup.enter="search">
                <button class="btn btn-primary mb-4 col-1" @click="search"> 搜索</button>
                <br>
                
            </div>

            <!-- 选择城市 -->
            <div class="d-flex  justify-content-center">
                <button class="btn btn-primary btn-sm " @click="changeCity('北京')">北京</button> 
                <button class="btn btn-primary btn-sm mx-5" @click="changeCity('上海')">上海</button>
                <button class="btn btn-primary btn-sm " @click="changeCity('天津')">天津</button>
                <button class="btn btn-primary btn-sm mx-5" @click="changeCity('重庆')">重庆</button>
            </div>
            
            <div >
                <span v-show="isActive">地点：{{fl}}</span>
                <div class="card card-body " v-for="weather in list">
                    <span>日期：{{weather.day}}</span>
                    <span>天气：{{weather.wea}}</span>
                </div>
                

            </div>
        </div>
    </div>
</body>
<!-- 官网提供的 axios 在线地址 -->
<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>
    // 我自己的script
    var app = new Vue({
        el:'#app',
        data:{
            isActive:false,
            city:"",
            fl:'',
            list:[]
        },
        methods:{
            search(){
                var that = this;
                // alert(that.weatherList)
                axios.get("http://ajax-api.itheima.net/api/weather?city=" + that.city).then
                (function(response){
                  that.isActive = true;
                  that.list =  response.data.data.data;
                  that.fl=  response.data.data.city

                  console.log(that.fl);
                    console.log(that.list);
                },function (err){})
            },
            changeCity(c1){
                this.city = c1;
                this.search();
            }
        }
    })

</script>


</html>

二、效果展示

①点击按钮直接查询到天气。

在这里插入图片描述

②输入完毕后摁下”enter“，或点击搜索查询天气

在这里插入图片描述

三、心得

1.城市的选择。所有的备选城市后面的点击事件都传入一个参数，到时候直接使用这个参数就可以。

<div class="d-flex  justify-content-center">
                <button class="btn btn-primary btn-sm " @click="changeCity('北京')">北京</button> 
                <button class="btn btn-primary btn-sm mx-5" @click="changeCity('上海')">上海</button>
                <button class="btn btn-primary btn-sm " @click="changeCity('天津')">天津</button>
                <button class="btn btn-primary btn-sm mx-5" @click="changeCity('重庆')">重庆</button>
 </div>

点击城市后直接出现天气详情。在方法里可以直接调用其他函数。

在这里插入图片描述

Record growth...

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
利用vue+axios实现简单天气查询

一、代码：<!DOCTYPE html><html><head> <title>天气查询案例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.stat
复制链接

扫一扫

专栏目录