×

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

作者:Terry2021.09.29来源:Web前端之家浏览:4118评论: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();
        }
    },
})

大家可以去试试吧。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20210929a1.html

网友评论文明上网理性发言 已有0人参与

发表评论: