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

作者：Terry2021.09.29来源：Web前端之家浏览：4858评论:0

关键词：vuejs

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();
        }
    },
})

大家可以去试试吧。

赏您的支持是我们创作的动力！