主要知识点
- axios数据的获取&传送
- 数组数据（里面装对象）的显示
- axios链接中未知变量的获取方式
- 点击替换文本框中内容，形参~
<!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>天气查询</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官方axios在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- <script src="main.js"></script> -->
<!-- 请求地址：http://wthrcdn.etouch.cn/weather_mini
示例：http://wthrcdn.etouch.cn/weather_mini?city=深圳
请求方法：get
请求参数：city -->
<style>
* {
margin: 0;
padding: 0;
}
#app {
margin: 100px auto;
text-align: center;
}
#app ul {
margin: 0 auto;
text-align: center;
width: 850px;
height: 80px;
}
input {
outline: none;
width: 300px;
height: 35px;
font-size: 18px;
}
button {
height: 37px;
}
a {
text-decoration: none;
color: grey;
}
li {
float: left;
list-style: none;
width: 170px;
height: 70px;
}
</style>
</head>
<body>
<div id="app">
<h2>天知道</h2>
<input type="text" placeholder="请输入查询的城市名称…" v-model="cityName" @keyup.enter="getCity">
<button>搜索</button>
<br>
<span>
<a href="#" v-for="aa in arr" @click="transform(aa)">{{aa}} </a>
</span>
<ul>
<li v-for="aaa in weatherCondition">
<!-- 对象的数值获取就是用.的 -->
{{aaa.data}}
<br> {{aaa.type}}
<br> {{aaa.low}}~{{aaa.high}}
<br> 风向：{{aaa.fengxiang}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
arr: ["北京", "上海", "广州", "深圳"],
cityName: "南昌",
weatherCondition: []
},
methods: {
getCity: function() {
// cityName内容用字符串的形式传过去~~
axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.cityName).then((response) => {
// console.log(response.data.data.forecast);
this.weatherCondition = response.data.data.forecast;
}, (error) => {
console.log(error);
})
},
transform: function(aa) {
this.cityName = aa; //我想到了形参，我真棒hhhh
axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.cityName).then((response) => {
this.weatherCondition = response.data.data.forecast;
})
}
}
})
</script>
</body>
</html>