生活随笔
收集整理的這篇文章主要介紹了
vue+axios天气查询——天知道效果展示及源码分析
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用vue制作城市的天氣查詢
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><link rel="stylesheet" href="./index.css"><script src="./index.js"></script>
</head><body><div id="app"><div class="search_form"><div class="logo"><img src="img/logo.png" alt="logo" /></div><div class="form_group"><input type="text" class="input_txt" placeholder="請輸入查詢的天氣" v-model="city" @keyup.enter="searchWeather" /><button class="input_sub" @click="searchWeather">搜 索
</button></div><div class="hotkey"><a href="javascript:;" v-for="city in hotCitys" @click="changeCity(city)">{{ city }}
</a></div></div><ul class="weather_list"><li v-for="(item,index) in weatherList" :key="item.date" :style="{transitionDelay:index*100+'ms'}"><div class="info_type"><span class="iconfont">{{ item.type }}
</span></div><div class="info_temp"><b>{{ item.low}}
</b> ~
<b>{{ item.high}}
</b></div><div class="info_date"><span>{{ item.date }}
</span></div></li></ul></div></body></html>
window
.onload = function() {var app
= new Vue({el
: '#app',data
: {city
: '',hotCitys
: ['北京', '上海', '廣州', '深圳'],weatherList
: []},methods
: {searchWeather() {var that
= thisaxios
.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city
).then(function(res) {that
.weatherList
= res
.data
.data
.forecast
}).catch(function(err) {console
.log(err
);})},changeCity(city) {this.city
= city
this.searchWeather()}}})
}
body {font-family: 'Microsoft YaHei';
}body,
ul,
h1,
h2,
h3,
h4,
h5,
h6 {margin: 0
;padding: 0
;
}h1,
h2,
h3,
h4,
h5,
h6 {font-size: 100%
;font-weight: normal
;
}a {text-decoration: none
;
}ul {list-style: none
;
}img {border: 0px
;
}.clearfix:before,
.clearfix:after {content: '';display: table
;
}.clearfix:after {clear: both
;
}.clearfix {zoom: 1
;
}.fl {float: left
;
}.fr {float: right
;
}.wrap {position: fixed
;left: 0
;top: 0
;width: 100%
;height: 100%
;background: #fff
;
}.search_form {width: 640px
;margin: 100px auto 0
;
}.logo img {display: block
;margin: 0 auto
;
}.form_group {width: 640px
;height: 40px
;margin-top: 45px
;
}.input_txt {width: 538px
;height: 38px
;padding: 0px
;float: left
;border: 1px solid #41a1cb
;outline: none
;text-indent: 10px
;
}.input_sub {width: 100px
;height: 40px
;border: 0px
;float: left
;background-color: #41a1cb
;color: #fff
;font-size: 16px
;outline: none
;cursor: pointer
;position: relative
;
}.input_sub.loading::before {content: '';position: absolute
;left: 0
;top: 0
;width: 100%
;height: 100%
;background: url('../img/loading.gif');
}.hotkey {margin: 3px 0 0 2px
;
}.hotkey a {font-size: 14px
;color: #666
;padding-right: 15px
;
}.weather_list {height: 200px
;text-align: center
;margin-top: 50px
;font-size: 0px
;
}.weather_list li {display: inline-block
;width: 140px
;height: 200px
;padding: 0 10px
;overflow: hidden
;position: relative
;background: url('./img/line.png') right center no-repeat
;background-size: 1px 130px
;
}.weather_list li:last-child {background: none
;
}.info_date {width: 100%
;height: 40px
;line-height: 40px
;color: #999
;font-size: 14px
;left: 0px
;bottom: 0px
;margin-top: 15px
;
}.info_date b {float: left
;margin-left: 15px
;
}.info_type span {color: #fda252
;font-size: 30px
;line-height: 80px
;
}.info_temp {font-size: 14px
;color: #fda252
;
}.info_temp b {font-size: 13px
;
}.tem .iconfont {font-size: 50px
;
}
圖片部分可以網上自己找，也可以刪了關于圖片的code
總結
以上是生活随笔為你收集整理的vue+axios天气查询——天知道效果展示及源码分析的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
