18.天知道练习 

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #mask {
            width: 700px;
            height: 300px;
            margin: 30px auto;
            text-align: center;
        }
        
        h1 {
            font-weight: 300;
            color: #12679e;
            padding: 30px 0 20px;
        }
        
        .sousuo {
            position: relative;
            width: 400px;
            height: 40px;
            background-color: #fff;
            margin: 0 auto;
            border: 1px solid#399acf;
        }
        
        input {
            position: absolute;
            top: 2px;
            left: 1px;
            width: 300px;
            height: 35px;
            outline: none;
            border: 0;
            padding-left: 5px;
        }
        
        .anniu {
            position: absolute;
            top: 0;
            right: 0;
            outline: none;
            width: 80px;
            height: 40px;
            background-color: #399acf;
            border: 0;
            color: #fff;
            font-size: 16px;
        }
        
        .chengshi {
            width: 400px;
            height: 30px;
            margin: 0 auto;
            text-align: left;
            font-size: 12px;
        }
        
        .chengshi span {
            margin-right: 5px;
        }
        
        .biankuang {
            padding: 0 5px;
            border-left: 1px solid rgb(182, 181, 181);
            border-right: 1px solid rgb(182, 181, 181);
        }
        
        .tianqi {
            margin-top: 15px;
            display: inline-block;
            font-size: 12px;
        }
        
        .tianqi>p:nth-child(1) {
            font-size: 20px;
            margin-bottom: 10px;
        }
        
        .tianqi>p {
            margin-top: 5px;
            color: orange;
        }
        
        .tianqi>p:last-child {
            margin-top: 10px;
            color: #000;
        }
        
        .weatherList {
            display: flex;
            margin-top: 50px;
        }
        
        .weatherList li {
            list-style: none;
            flex: 1;
            border-right: 1px solid rgb(209, 204, 204);
        }
        
        .weatherList li:last-child {
            border-right: 0;
        }
    </style>
<body>
    <div id="mask">
        <h1>天知道</h1>
        <div class="sousuo">
            <input type="text" v-model="city" @keyup.enter="searchWeather">
            <button class="anniu" @click="changeCity(city)">搜索</button>
        </div>
        <div class="chengshi">
            <span @click="changeCity('北京')">北京</span>
            <span @click="changeCity('上海')">上海</span>
            <span @click="changeCity('广州')">广州</span>
            <span @click="changeCity('深圳')">深圳</span>
        </div>
        <ul class="weatherList">
            <li class="yubao" v-for="i in weatherList">
                <div class="tianqi">
                    <p> {{ i.type }} </p>
                    <p>
                        <b> {{ i.low }} </b>
                        <b> {{ i.high }} </b>
                    </p>
                    <p> {{ i.date }} </p>
                </div>

            </li>
        </ul>

    </div>
    <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="18.main.js"></script>
</body>
var mask = new Vue({
    el: "#mask",
    data: {
        city: '',
        weatherList: []
    },
    methods: {
        searchWeather: function() {
            var that = this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
                .then(function(response) {
                    console.log(response.data.data.forecast); // 拿到网络请求库里面的天气预报数据
                    var tianqiyb = response.data.data.forecast;
                    that.weatherList = tianqiyb;
                }, function(error) {
                    console.log(error);
                })
        },
        changeCity: function(city) {
            this.city = city;
            this.searchWeather();
        }

    }
})

 

posted @ 2020-12-28 22:26  闭上耳朵  阅读(44)  评论(0)  编辑  收藏  举报