VUE开发小应用：查看各地区天气预报 - Web前端

作者：98wpeu发布时间：2026-09-02分类：网页前端技术浏览：6

导读：VUE开发小应用：查看各地区天气预报。废话不多说，直接上代码：<!DOCtype html><HTML> <head> <m...

VUE开发小应用：查看各地区天气预报。废话不多说，直接上代码：

<!DOCtype html>
<HTML>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-eqUIv="X-UA-Compatible" content="IE=Edge" />
    <title>天知道</title>
    <link rel="StyleSheet" href="CSS/reset.css" />
    <link rel="stylesheet" href="css/index.css" />
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="APP">
      <div>
        <div><img src="img/logo.png" alt="logo" /></div>
        <div>
          <input
            type="text"
           
            placeholder="请输入查询的天气"
            v-model="city"
            @keyup.enter="searchWeather"
          />
          <button @click="searchWeather">搜 索</button>
        </div>
        <div>
          <a href="javascript:;" @click="searchWeatherByCity('北京')">北京</a>
          <a href="JavaScript:;" @click="searchWeatherByCity('上海')">上海</a>
          <a href="Javascript:;" @click="searchWeatherByCity('广州')">广州</a>
          <a href="javascript:;" @click="searchWeatherByCity('深圳')">深圳</a>
        </div>
      </div>
      <ul v-cloak="block">
        <li v-for="item in weatherlist">
          <div>
            <span>{{item.type}}</span>
          </div>
          <div>
            <b>{{item.low}}</b>
            ~
            <b>{{item.high}}</b>
          </div>
          <div><span>{{item.date}}</span></div>
        </li>
      </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://CDN.JSdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 Axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axiOS.min.js"></script>
    <!-- 自己的js -->
    <script src="./js/mAIn.js"></script>
  </body>
</html>

至于样式CSS，这里就不想多说，大家自己去布局咯，只是分享下main.js代码：

/*
  请求地址:HTTP://wthrcdn.etouch.cn/weather_mini
  请求方法:get
  请求参数:city(城市名)
  响应内容:天气信息

  1. 点击回车
  2. 查询数据
  3. 渲染数据
  */
var app = new VUE({
    el: "#App",
    data: {
        city: '',
        weatherList: []
    },
    methods: {
        searchWeather() {
            if (this.city == '') {
                alert("请输入城市！");
            } else {
                var that = this;
                axIOS.get('http://wthrcdn.etouch.cn/weather_mini?city=' + that.city).then(function (response) {
                    if (response.data.status == 1002) {
                        alert("您输入的城市有误！请重新输入！");
                        that.city = '';
                    } else {
                        that.weatherList = response.data.data.forecast;
                        console.log(response.data);
                    }
                }).catch(function (error) {
                    console.log(error);
                })
            }
        },
        searchWeatherByCity(city) {
            this.city = city;
            this.searchWeather();
        }
    },
})

大家可以去试试吧。

标签：各地区天气预报 Web VUE

上一篇：Windows 11 升级：首先要问的五个问题 - Web前端
下一篇：React 教程：从头开始构建计算器应用程序 - Web前端

VUE开发小应用：查看各地区天气预报 - Web前端

相关推荐