用Vue实现天知道案例——天气预报
用Vue实现天知道案例——天气预报需求请求路径全部代码成果展示需求按下回车或者搜索实现搜索天气查询数据(axios接口v-model)渲染数据(v-for)请求路径请求地址http://wthrcdn.etouch.cn/weather_mini请求方式get请求参数 city(查询的城市名)响应内容:天气信息全部代码<!DOCTYPE html><html lang="en"&
·
需求
- 按下回车或者搜索实现搜索天气
- 查询数据(axios接口v-model)
- 渲染数据(v-for)
请求路径
- 请求地址
http://wthrcdn.etouch.cn/weather_mini
- 请求方式 get
- 请求参数 city(查询的城市名)
- 响应内容:天气信息
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>天知道</title>
</head>
<style>
#weather{
width: 1100px;
height: 500px;
margin: 150px auto;
}
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
@font-face {
font-family: 'iconfont';
src: url('font2/iconfont.eot');
src: url('font2/iconfont.eot?#iefix') format('embedded-opentype'),
url('font2/iconfont.woff2') format('woff2'),
url('font2/iconfont.woff') format('woff'),
url('font2/iconfont.ttf') format('truetype'),
url('font2/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 50px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header{
margin: 150px auto 50px;
width: 200px;
height: 50px;
}
.one{
color: #00a4ff;
}
.two{
color: rgb(144, 214, 38);
}
.three{
color: rgb(255, 187, 0);
}
.search{
width: 800px;
height: 50px;
border: 1px solid #00a4ff;
margin: 0 auto;
}
.insearch{
float: right;
display: block;
width: 150px;
height: 50px;
background-color: #00a4ff;
color: #fff;
font-size: 25px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.decorate{
border:none;
width: 600px;
margin: 0 20px;
height: 48px;
outline: none;
font-size:20px;
font-weight: 200;
}
.hotKey{
margin: 10px 160px;
}
.hotKey a{
text-decoration: none;
color: #666;
margin: 0 4px;
}
.hotKey a:hover{
color:yellowgreen;
}
h2,
.tem{
color: orange;
text-align: center;
}
.display ul{
margin: 100px 0;
}
h2{
font-size: 30px;
margin: 18px;
}
.day{
color: rgb(165, 165, 165);
text-align: center;
margin-top: 15px;
}
ul li{
display: inline-block;
width: 200px;
height: 150px;
border-right: 1px solid #ccc;
}
ul li:last-child{
border:none;
}
</style>
<body>
<div id="weather">
<header>
<span class="iconfont one"></span>
<span class="iconfont two"></span>
<span class="iconfont three"></span>
</header>
<div class="search">
<input type="text" class="decorate" placeholder="请输入查询的天气" v-model="now" @keyup.enter="query">
<span class="insearch" @click="query">搜 索</span>
</div>
<div class="hotKey">
<a href="javascript:;" @click="exa('北京')">北京</a>
<a href="javascript:;" @click="exa('上海')">上海</a>
<a href="javascript:;" @click="exa('西安')">西安</a>
<a href="javascript:;" @click="exa('深圳')">深圳</a>
</div>
<div class="display">
<ul>
<li v-for="item in weatherList">
<h2>{{item.type}}</h2>
<div class="tem">
<span>{{item.low}}</span>
<span>~</span>
<span>{{item.high}}</span>
</div>
<div class="day">{{item.date}}</div>
</li>
</ul>
</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var weather=new Vue({
el:"#weather",
data:{
weatherList:[],
now:""
},
methods:{
exa:function(now){
this.now=now;
this.query();
},
query:function(){
var that=this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.now).then(function(response){
that.weatherList=response.data.data.forecast;
}).catch(function(err){
console.log(err);
})
}
}
})
</script>
</body>
</html>
成果展示
更多推荐
已为社区贡献2条内容
所有评论(0)