×

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

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

大家可以去试试吧。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vuejs20210929a1.html

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

发表评论:

最新留言

  • Web前端之家

    GoogleAdSense可以的,可以加群主,帮你搞定这事情~~...

  • s121

    GoogleAdSense好弄吗,想弄一个账号。...

  • s121

    不错,正好用到,收藏了!...

  • 访客

    什么机翻...

  • Web前端之家

    只是更轻便,还是有些差距的呢,小项目可以玩玩。...

  • ja124

    这个跟vue和react比,好些吗?...

  • Web前端之家

    OK,已经更新,谢谢!...

  • 韩涛博客

    韩涛博客的域名更换为www.hantaosec.com啦,请更新一下域名哈,谢谢。我还会继续链着咱们...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria