VUE框架 ajax请求案例天气预报 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
    <script src="http://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
        tr td{
            padding: 10px;
            width: 100px;
        }
    </style>

</head>
<body>

<div id="app">
    <button @click="sendAjax">ajax</button>
    <p> <input type="text" placeholder="请输入查询城市" v-model="city">
        <button @click="sendAjax">查询</button>
    </p>
    <div>{{forecast}}</div>

    <table border="1" v-if="forecasts.length>1">
        <tr>
            <td>日期</td>
            <td>类型</td>
            <td>最高气温</td>
            <td>最低气温</td>
            <td>风向</td>
        </tr>

        <tr v-for="day_forecast in forecasts">
            <td>{{day_forecast.date}}</td>
            <td>{{day_forecast.type}}</td>
            <td>{{day_forecast.high}}</td>
            <td>{{day_forecast.low}}</td>
            <td>{{day_forecast.fengxiang}}</td>
        </tr>
    </table>

</div>

<script>

    vm = Vue.createApp({
        data() {
            return {
                forecasts: [],
                city: "北京",
            }
        },
        methods: {
            sendAjax(){
                var that = this;
                axios.get("http://wthrcdn.etouch.cn/weather_mini",{
                    params: {
                        city: that.city,
                    }
                }).then(function (response) {
                    console.log("response",response);
                    that.forecasts = response.data.data.forecast
                })
            },
        },

        created(){
            this.sendAjax()
        },
    }).mount("#app")

</script>

</body>
</html>

 

 





posted @ 2022-06-16 22:06  呼长喜  阅读(203)  评论(0)    收藏  举报