基于vue和axios的天气查询

我不是他i · 发表于 2019-11-24 02:24:53

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由我不是他i 于 2019-11-24 02:27 编辑

游客，如果您要查看本帖隐藏内容请回复

基于vue.js和axios.js制作的天气查询，是个学习vue.js非常时候拿来练手的小项目
这是html的代码

<!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>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app" class="wrap">
<div class="search_form">
<div class="logo">天气查询</div>
<div class="form_group">
<input type="text" @keyup.enter="searchweather" class="input_text" placeholder="请输入查询的天气" v-model="city">
<button class="input_sub">
搜索
</button>
</div>
<div class="hotkey">
<a href="javascript:;">北京</a>
<a href="javascript:;">上海</a>
<a href="javascript:;">广州</a>
<a href="javascript:;">深圳</a>
</div>
</div>
<ul class="weather_list">
<li v-for="item in weatherList">
<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>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./main.js"></script>
</body>
</html>

复制代码

注意：这里的vue和axios的引用是没有先后关系的
这里是css的代码

复制代码

这里是js的代码了

//main.js
var app = new Vue({
el:"#app",
data:{
city:"",
weatherList:[],
},
methods: {
searchweather:function(){
// console.log("查询天气");
// console.log(this.city);
var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function(response){
console.log(response.data.data.forecast);
that.weatherList = response.data.data.forecast;
})
}
},
})

复制代码

主要就是使用axios和vue的相互结合啦

v.逆天改命 · 发表于 2019-12-18 21:56:38

666666

F小冷 · 发表于 2020-7-7 15:31:46

cjw011 · 发表于 2020-7-7 17:12:21

学习一下

心驰神往 · 发表于 2021-11-5 14:05:53

恢复

旺旺仔小馒头 · 发表于 2021-11-5 19:35:02

不错

账号		自动登录	找回密码
密码			立即注册

[作品展示] 基于vue和axios的天气查询