Vue 相关

天气应用
Vue+axios
功能：
1.输入城市搜索相关天气功能(v-on enter v-model axios get that=this v-for [])
2.点击城市名切换该城市天气(this.city=city 调用 1 中函数)
代码：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>天知道</title>
    <style>
        .wrap {
            width: 600px;
            margin: 20px auto 0;
        }
        
        .wrap header {
            text-align: center;
            font-size: 30px;
            color: blue;
            margin-bottom: 20px;
        }
        
        form {
            width: 100%;
        }
        
        form input {
            width: 78%;
            height: 50px;
            border: 1px solid blue;
        }
        
        form button {
            width: 20%;
            height: 50px;
            line-height: 50px;
            border: none;
            font-size: 18px;
            color: #fff;
            text-align: center;
            background-color: rgb(40, 136, 245);
        }
        
        footer {
            display: flex;
            margin-top: 30px;
        }
        
        li {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <div class="wrap" id="sky">
        <header>天知道</header>
        <main>
            <form action="#">
                <input @keyup.enter="searchWeather" v-model="city" type="text" placeholder="请输入城市">
                <button>搜索</button>
                <div>
                    <a href="javascript:;" @click="changeCity('北京')">北京</a>
                    <a href="javascript:;" @click="changeCity('上海')">上海</a>
                    <a href="javascript:;" @click="changeCity('广州')">广州</a>
                    <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
                </div>
            </form>
        </main>
        <footer>
            <ul>
                <li v-for="item in weatherList">
                    <div>
                        <strong>{{item.type}}</strong>
                        <span>{{item.low}}</span>
                        <span>{{item.high}}</span>
                    </div>
                </li>
            </ul>
        </footer>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        let app = new Vue({
            el: "#sky",
            data: {
                city: '',
                weatherList: []
            },
            methods: {
                searchWeather: function() {
                    let that = this;
                    axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city).then(function(response) {
                            that.weatherList = response.data.data.forecast
                        })
                        .catch(function(err) {})
                },
                changeCity: function(city) {
                    this.city = city;
                    this.searchWeather();
                }
            }
        })
    </script>
</body>

</html>
Vue 相关

推荐阅读更多精彩内容
