首页 / IOS / 【VUE】【axios】天气查询小案例
【VUE】【axios】天气查询小案例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了【VUE】【axios】天气查询小案例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2082字，纯文字阅读大概需要3分钟。
内容图文
主要知识点
- 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>
内容总结
以上是互联网集市为您收集整理的【VUE】【axios】天气查询小案例全部内容，希望文章能够帮你解决【VUE】【axios】天气查询小案例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】