天气查询包括回车查询和点击查询两种功能
回车查询
1.按下回车（v-on+.enter）
2.查询数据（axios+接口+v-model）
3.渲染数据（v-for+arr）
点击查询
1.点击城市查询（v-on+自定义参数）
2.查询数据（this.）
3.渲染数据（this.）
<template>
<div id="app">
<div>
<div id="one">
<input type="text" v-model="city" placeholder="请输入需要查询城市名" @keyup.enter="search" /><button @click="search">搜索</button>
</div>
<div id="two">
<a href="javascript:;" @click="change('北京')">北京</a>
<a href="javascript:;" @click="change('上海')">上海</a>
<a href="javascript:;" @click="change('广州')">广州</a>
<a href="javascript:;" @click="change('深圳')">深圳</a>
</div>
<ul id="three">
<li v-for="value in wList">
<div>
<span>{{value.type}}</span>
</div>
<div>
<b>{{value.low}}</b>
~
<b>{{value.high}}</b>
</div>
<div>
<span>{{value.date}}</span>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "App",
data: () => {
return {
city: "",
wList: []
};
},
methods: {
search: function() {
console.log(this.city);
var that = this;
this.$axios({
url: "http://wthrcdn.etouch.cn/weather_mini?city=" + this.city,
methods: "get"
})
.then(function(response) {
// console.log(response.data.data.forecast)
that.wList = response.data.data.forecast;
})
.catch(function(err) {});
},
change: function(city) {
this.city = city;
// methods中定义的方法内部，可以通过this关键字调用其他的方法
this.search();
}
},
created: function() {}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
ul,
li {
list-style: none;
padding: 0;
}
#app>div{
900px;
margin: 0 auto;
}
#one{
text-align: left;
margin-left: 150px;
}
#one input{
400px;
height: 30px;
border: 2px solid #ccc;
}
#one button{
80px;
height: 35px;
background-color: #0af;
border: 0;
}
#two{
text-align: left;
margin-bottom: 40px;
margin-left: 155px;
margin-top: 5px;
}
#two a{
color: rgb(102, 99, 99);
text-decoration: none;
font-size: 14px;
}
#three li{
float: left;
border-right: 2px solid #ccc;
padding: 6px;
}
#three li:first-child{
padding-left:0;
}
#three li:last-child{
border: 0
}
li div{
margin: 10px 0;
}
li div:first-child span{
font-size: 20px;
color: #ef7000;
font-weight: bold;
}
li div:first-child{
margin-top: 0
}
li div:last-child span{
font-size: 14px;
color: #999;
}
li div:last-child {
margin-bottom: 0
}
</style>