vue axios天气查询——天知道效果展示及源码分析 -ag凯发k8国际
发布时间：2024/10/14
vue
44
豆豆
ag凯发k8国际
收集整理的这篇文章主要介绍了
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>documenttitle><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 = citythis.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
总结
以上是ag凯发k8国际为你收集整理的vue axios天气查询——天知道效果展示及源码分析的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。
