【Vue】 Vue+axios实现查询天气_vue不使用语法糖实现echarts折线图axios获取当地天气-优快云博客

本文链接：https://blog.youkuaiyun.com/possible999/article/details/113833286

这个示例展示了如何利用Vue.js构建一个简单的天气查询应用。用户可以输入城市名或从预设的城市列表中选择，点击搜索按钮获取天气预报。应用通过调用http://wthrcdn.etouch.cn/weather_mini API获取数据，并更新到页面上显示天气类型、温度范围、日期和风向等信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可在 “资源”中下载

html：


        <div id="sou">
            <input type="text" placeholder="请输入城市：" id="input" @keyup.enter="search" v-model="city">
            <button @click="search">搜索</button>
            <div id="ul1">
                <a href="javascript:;" @click="changecity('北京')">北京</a>
                <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>
        <div id="weather_div">
            <ul id = "weather_list">
            <li v-for="item in weatherList">
                <span class="info_type">{{item.type}}</span>
                <span class="info_temp">{{item.low+"~"+item.high}}</span>
                <span class="info_date">{{item.date}}</span>
                <span class="info_feng">{{item.fengxiang}}</span>
            </li>
        </ul>
        </div>

Vue：

<script type="text/javascript">
    /* 
        查询天气的axios接口
        地址：http://wthrcdn.etouch.cn/weather_mini
        请求方法：get
        参数：city

    */
        var vm = new Vue({
            el:"#app",
            data:{
                city:"北京",
                weatherList:[],
            },
            methods: {
                search: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.search();
                    }
            }
            
        })
        
    </script>