vue实现查询多条记录_vue.js 实现天气查询

效果预览：http://songothao.gitee.io/weather_query_based_on_vuejs/

项目已上传码云：叁贰壹/vuejs实现天气查询

知乎视频www.zhihu.com

一、使用 axios + vue.js:

axios-get请求：

axios.get(地址?key=value&key2=value2).then(function(response){}
).catch( function(err){}
);

2. axios-post 请求：

axios.post(地址, {key:value, key2:value2}).then(function(response){}
).catch( function(err){}
);

3. 引入 axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二、天气的接口 http://wthrcdn.etouch.cn/weather_mini

三、代码实现

main.js

var app = new Vue({el: "#app",data: {city: '',forecast: []},methods: {search: function() {var that = this;axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`).then((res) => {that.forecast = res.data.data.forecast;}).catch((err) => {console.log(err);})},changeCity: function(city) {this.city = city;this.search();}}
})

index.html

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>查询天气</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/index.css"><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head><body><div class="wrap" id="app"><header class="header"><h1>小朋友查天气</h1></header><section class="main"><section class="search"><input type="text" placeholder="请输入查询的城市" v-model='city' @keyup.enter='search'><span class="btn" @click="search">搜索</span></section><section class="common-use"><a href="javascript:;" @click="changeCity('北京')">北京</a><a href="javascript:;" @click="changeCity('上海')">上海</a><a href="javascript:;" @click="changeCity('广州')">广州</a><a href="javascript:;" @click="changeCity('深圳')">深圳</a></section><section class="weather"><ul><li v-for='item in forecast'><div><h1>{{item.type}}</h1><p>{{item.low}} ~ {{item.high}}</p><p>{{item.date}}</p></div></li></ul></section></section></div><script src="./js/main.js"></script>
</body></html>

CSDN：https://blog.csdn.net/weixin_43148062

简书：https://www.jianshu.com/u/45339cbb7573

vue实现查询多条记录_vue.js 实现天气查询相关推荐

vue实现查询多条记录_sql：多表查询
1进阶9:联合查询关键词union联合.合并:将多条查询语句的结果合并成一个结果语法:查询语句1 union 查询语句2 union ... 应用场景:当我们要查询的结果来自于多个表,且多个表之间 ...
MySQL批量查询能返回集合吗_JDBC——查询多条记录，返回对应的对象的集合；查询一条记录，返回对应的对象...
//查询多条记录,返回对应的对象的集合 public List getForList(Class clazz, String sql, Object...args){ List list = new ...
mysql 下一条数据_mysql 查询一条记录的下一条和上一条记录
如果ID是主键或者有索引,可以直接查找: 方法一: 查询上一条记录的SQL语句(如果有其他的查询条件记得加上other_conditions以免出现不必要的错误): select * from tab ...
java查询多条_Mybatis查询多条记录并返回List集合的方法
实体对象如下: /** 使用lobmok插件 */ @Getter @Setter @NoArgsConstructor @ToString @EqualsAndHashCode public cla ...
mysql查询最新插入的一条_我刚数据库中插入一条记录，紧接着再去查询却查不到？...
向数据库中奖记录表中添加一条中奖记录,马上调用方法查询这条记录, 查询不到! 我打开数据库查看数据是插入成功的. 开发语言是用java, 框架 hibernate! 插入数据,和查询数据代码如 ...
随机查询N条记录MySQL、SQLServer、Oracle、postgreSQL
2019独角兽企业重金招聘Python工程师标准>>> 利用一条SQL语句从数据库Table表中随机获取N条记录,各数据库的SQL语句略有不同,如下: 1.MySql Select ...
根据条件查询某条记录的条数_「性能与架构」MySQL 8 查询优化新工具 Explain Analyze...
来源:性能与架构公众号 1. Explain Analyze 介绍 Explain 是我们常用的查询分析工具,可以对查询语句的执行方式进行评估,给出很多有用的线索. 但他仅仅是评估,不是实际的执行情况 ...
Mysql 按条件排序查询一条记录 top 1 对应Mysql的LIMIT 关键字
项目中需要每次查询一个表中的最新的一条记录,表结构里面有日期字段.只需要显示一条记录. Mysql帮助文档里面的解释 3.6.2. 拥有某个列的最大值的行任务:找出最贵物品的编号.销售商和价格. 这 ...
mysql获得每条记录_如何在MySQL查询结果集中得到每条记录的行号
如果需要在查询语句返回的列中包含一列表示该条记录在整个结果集中的行号, ISO SQL:2003 标准提出的方法是提供 ROW_NUMBER() / RANK() 函数. Oracle 中可以使用标准 ...

vue实现查询多条记录_vue.js 实现天气查询

vue实现查询多条记录_vue.js 实现天气查询相关推荐

最新文章

热门文章