<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head>
<style>
.container{
width: 80%;
margin: 0 auto;
border:1px solid #cccccc;
border-radius: 10px;
padding: 40px;
}
table{
margin-top: 40px;
}
</style>
<body> <div class="container">
<form class="form-inline">
<label for="city">请选择城市:</label>
<input type="text" class="form-control" id="city" placeholder="请选择城市" v-model="city">
<button type="button" class="btn btn-primary" v-on:click="search">查询</button>
</form>
<table class="table table-bordered">
<thead>
<tr>
<th>城市</th>
<th>日期</th>
<th>温度</th>
<th>天气情况</th>
<th>风向</th>
</tr>
</thead>
<tbody>
<tr v-for="item in info">
<td>{{ city }}</td>
<td>{{ item.date }}</td>
<td>{{ item.temperature }}</td>
<td>{{ item.weather }}</td>
<td>{{ item.direct }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
new Vue({
el: '.container',
data () {
return {
info: null,
city: null
}
},
// mounted () {
//
// },
methods:{
search:function(){
_this = this;
axios
.get('http://www.1809A.com/api/Index/index/city/'+_this.city)
.then(function (response) {
_this.info = response.data.result.future;
_this.city = response.data.result.city;
})
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
}
})
</script>
</html>
api模块index控制器kuaidi方法 public function index()
{
// 查询天气预报
$city = input("city");
// 确定接口地址:
$url = "http://apis.juhe.cn/simpleWeather/query";
// 确定参数
$param = ['city'=>$city,'key'=>'7808686de93c14aae043ee1b8eb9916c'];
// 调用函数执行
$result = curl_request($url,true,$param);
// 判断结果
if(!$result){
echo "查询失败";
die;
}
// 成功
return $result;
}

tp 天气Vue参考的更多相关文章

  1. vue参考

    https://github.com/taylorchen709/vue-admin http://element-cn.eleme.io/#/zh-CN/component/layout https ...

  2. 新手创建Vue项目

    ======================安装vue=============================(参考网址:http://www.bubuko.com/infodetail-21320 ...

  3. vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 (diff部分待后续更新)

    vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...

  4. vue eslint 代码自动格式化

    vue-cli 代码风格为 JavaScript Standard Style 代码检查规范严格,一不小心就无法运行,使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码 V ...

  5. vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用

    vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...

  6. vue理解$nextTick

    首先要明确: Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 ...

  7. vue系列之vue cli 3引入ts

    插件 Vue2.5+ Typescript 引入全面指南 vue-class-component强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 vue-property-d ...

  8. angular里使用vue/vue组件怎么在angular里用

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 如何在angularjs(1)中使用vue参考: https://medium.com/@graphicbeacon/h ...

  9. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

随机推荐

  1. 【微服务】- SpringCloud中Config、Bus和Stream

    文章目录 SpringCloud中Config 1.Config的简介 官网 分布式系统面临的问题 config是什么 如何使用 能做什么 与git的配合使用 2.Config服务端的配置和测试 准备 ...

  2. TCP三次握手和四次挥手【转】

    一. TCP/IP协议族 TCP/IP是一个协议族,通常分不同层次进行开发,每个层次负责不同的通信功能.包含以下四个层次: 1. 链路层,也称作数据链路层或者网络接口层,通常包括操作系统中的设备驱动程 ...

  3. Xcode 插件推荐

    1. Alcatraz(建议安装,以下插件都可以在Alcatraz下载安装) 使用Alcatraz来下载管理Xcode插件, 2.下载安装注释插件VVDocumenter-Xcode. 3.使用代码对 ...

  4. shell中的括号(小括号,大括号/花括号)

    在这里我想说的是几种shell里的小括号,大括号结构和有括号的变量,命令的用法,如下: 1.${var} 2.$(cmd) 3.()和{} 4.${var:-string},${var:+string ...

  5. shell——wait与多进程并发

    在脚本里用&后台打开多个子进程,用wait命令可以使这些子进程并行执行. 例1: fun1(){ while true do echo 1 sleep 1 done } fun2(){ whi ...

  6. 警惕!Python 中少为人知的 10 个安全陷阱!

    作者:Dennis Brinkrolf 译者:豌豆花下猫@Python猫 原题:10 Unknown Security Pitfalls for Python 英文:https://blog.sona ...

  7. 38、python并发编程之IO模型

    目录: 一 IO模型介绍 二 阻塞IO(blocking IO) 三 非阻塞IO(non-blocking IO) 四 多路复用IO(IO multiplexing) 五 异步IO(Asynchron ...

  8. 依赖于angular的table组件

    组件实现了以下功能 1. 列宽可动态拖动 2. 列数据排序 3. 列过滤 4. 列位置自由调整 除了需要引入angular.js(我用的是1.4.6版本),还需要引用一个angular衍生出来的插件n ...

  9. Android SugarORM(1)

    Android Sugar ORM (1) Android Sugar ORM比我之前用过的ORM都要简单许多, 其目的是简化与Android中SQLite数据库的交互, 优点如下: 消除了编写SQL ...

  10. 『德不孤』Pytest框架 — 5、Pytest失败重试

    Pytest失败重试就是,在执行一次测试脚本时,如果一个测试用例执行结果失败了,则重新执行该测试用例. 前提: Pytest测试框架失败重试需要下载pytest-rerunfailures插件. 安装 ...