7 Vue - 天气预报 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
<style>
    .myWidth{
        width: 500px;
        hight:250px;
        border: 1px solid red;
    }

</style>
</head>
<body>

    <div id="app">
        <h3>天气预报</h3>
        <p>
            <input type="text" v-model="city" @keypress.enter="getWeather">
            <a href="javascript:;" @click="changeCity('北京')">
                北京
            </a>&nbsp;&nbsp;
            <a href="javascript:;" @click="changeCity('上海')">
                上海
            </a>&nbsp;&nbsp;
            <a href="javascript:;" @click="changeCity('广州')">
                广州
            </a>&nbsp;&nbsp;
            <a href="javascript:;" @click="changeCity('深圳')">
                深圳
            </a>&nbsp;&nbsp;
            <input type="button" value="查询天气" @click="getWeather">
        </p>
        <div class="myWidth">
            <p >
                {{city + str}}
            </p>
            <ul style="list-style-type: none;" v-for="(items, index) in weathers">
                <li>
                    <span>
                        {{items.date}}
                    </span>&nbsp;&nbsp;
                    <span>
                        {{items.high}}
                    </span>&nbsp;&nbsp;
                    <span>
                        {{items.low}}
                    </span>&nbsp;&nbsp;
                    <span>
                        {{items.type}}
                    </span>
                </li>
            </ul>
        </div>
    </div>

    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({     // 创建 Vue 应用
            el: '#app',         // 挂载点，挂载元素
            data: {             // 数据（响应式）
                city: "",
                weathers:[],
                str: "天气预报"
            },
            methods: {
                // a标签修改城市
                changeCity(city){
                    // 更改城市
                    this.city = city;
                    // 调用getWeather方法
                    this.getWeather();
                },
                // 获取天气
                getWeather(){
                    console.log(this.getMsg)
                    var that = this;
                    axios({
                        //设置请求方式，不设置默认是get
                        method: "GET",
                        //设置url和path
                        baseURL:"http://wthrcdn.etouch.cn/weather_mini?city="+this.city,
                        url:"",
                        // 设置头信息
                        headers:{

                        },
                        // 请求数据
                        data:{

                        }
                    }).then(
                        function (response){
                            // console.log(response.status);
                            // console.log(response.data);
                            // axios 回调函数内部拿不到this
                            console.log(response)
                            console.log(response.data.data.forecast);
                            that.weathers = response.data.data.forecast;


                        },
                        function(err){
                            console.log(err);
                        }
                    )
                }

            }


        })
    </script>
</body>
</html>

 

posted @ 2021-04-11 20:26  栗子测试开发  阅读(194)  评论(0)    收藏  举报