zoukankan      html  css  js  c++  java
  • 【Vue自学笔记(四)】天气案例

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

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 官网提供的axios库在线地址 -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    
    <body>
        <div id="app">
            <div>
                <h2>天知道</h2>
                <!-- search中的参数其实就是data中的同名参数的值 -->
                <!-- 使用双向绑定实现回车查询和点击查询 -->
                <input type="text" v-model="city" @keyup.enter="search(city)">
                <!-- 如果搜索框中 -->
                <button @click="search(city)">搜索</button>
            </div>
            <div>
                <!-- 和视频不同使用的是一个list,点击事件调用的是一个带有参数的查询方法 -->
                <a v-for="(item,index) in cityArr" @click="search(cityArr[index])">{{cityArr[index]}}</a>
            </div>
            <div>
                <ul>
                    <li v-for="(item,index) in weatherArr">
                        日期:{{item.date}}<br>
                        最高温度:{{item.high}}
                        最低温度:{{item.low}}
                        风向:{{item.fengli}}
                        级数:{{item.gl}}
                        天气:{{item.type}}
                    </li>
                </ul>
            </div>
        </div>
    </body>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                cityArr: ["北京", "天津", "深圳", "广州"],
                city: "",
                weatherArr: [],
            },
            methods: {
                search: function (a) {
                    var _this = this
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + a)
                        .then(function (response) {
                            //打印response
                            console.log(response)
                            //将返回的参数赋值给weatherArr,注意层级
                            _this.weatherArr = response.data.data.forecast
                        })
                        .catch(function (err) { })
                }
            }
        })
    
    </script>
    
    </html>
    
  • 相关阅读:
    cookie、 Session Storage 、 Local Storage
    json 常用的方法
    ssm 框架 使用ajax异步,实现登陆
    ssm框架整合,配置文件中的配置内容
    ipv4和ipv6的区别
    分析域名的解析过程
    网络体系结构总结
    线程同步和异步
    博客目录
    [STM32H743]按键控制LED
  • 原文地址:https://www.cnblogs.com/zllk/p/14184736.html
Copyright © 2011-2022 走看看