Loading

Vue快速入门（其二）

axios：

axios+Vue：

案例：天知道

简陋无样式的自己的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" @keyup.enter="getWeather" v-model="city">
    <br>
    <a href="#" @click="changeCity('北京')">北京</a>
    <a href="#" @click="changeCity('上海')">上海</a>
    <a href="#" @click="changeCity('广州')">广州</a>
    <a href="#" @click="changeCity('深圳')">深圳</a>
    <li v-for="item in weather">
        <h2>{{item.type}}</h2>
        <h4>{{item.low + item.high}}</h4>
        <span>{{item.date}}</span>
        <br>
    </li>
</div>
<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            city: '',
            weather: {}
        },
        methods: {
            getWeather: function () {
                var that = this;
                axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + that.city)
                    .then(function (response) {
                        // that.weather = response.
                        that.weather = response.data.data.forecast;
                    })
            },
            changeCity: function (city) {
                this.city = city;
                this.getWeather();
            }
        }
    })
</script>
</body>
</html>

posted @ 2021-11-01 18:40  幻梦翱翔  阅读(31)  评论(0)    收藏  举报