<!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. KMP 入门

    再次学习 \(\rm KMP\) 后不一样的理解. 一些概念 定义字符串 \(S\) 的真 前/后 缀为非自身的 前/后 缀. 定义字符串 \(S\) 的 \(border\) 为 \(S\) 的公共 ...

  2. php表单初始化

    转载请注明来源:https://www.cnblogs.com/hookjc/ //初始化表单值的函数function  InitForm($row,$form="form1"){ ...

  3. tcp协议下的Socket

    import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.net ...

  4. nginx的优化和防盗链

    nginx的优化和防盗链 目录 nginx的优化和防盗链 一.nginx的优化 1. 隐藏版本号 (1)隐藏版本号的原因 (2)查看版本号的方法 (3)隐藏方法一:修改配置文件 (4)隐藏方法二:修改 ...

  5. Kubernetes 集群和应用监控方案的设计与实践

    目录 Kubernetes 监控 监控对象 Prometheus 指标 实践 节点监控 部署 Prometheus 部署 Kube State Metrics 部署 Grafana 应用如何接入 Pr ...

  6. JavaScript 的DOM操作详解

    内容概要 DOM之查找标签 基本查找 间接查找 节点操作 获取值操作 class操作 样式操作 事件 内置参数this 事件练习 内容详细 DOM操作 DOM(Document Object Mode ...

  7. python内置模块之re模块

    内容概要 re模块常用方法 findall search match re模块其他方法 split sub subn compile finditer findall 对无名分组优先展示 re实战之爬 ...

  8. Solution -「LOCAL」「cov. 牛客多校 2020 第三场 I」礼物

    \(\mathcal{Description}\)   给定排列 \(\{a_n\}\),求字典序第 \(K\) 大的合法排列 \(\{b_n\}\).称一个排列 \(\{p_n\}\) 合法,当且仅 ...

  9. Large Sacle Distributed Deep Networks

    本文是谷歌发表在NeurIPS 2012上的一篇论文,主要讨论了在几万个CPU节点上训练大规模深度网络的问题,并提出了一个名为DistBelief的软件框架.在该框架下实现了两种大规模分布式训练算法: ...

  10. 突然发现，npm里request依赖包已经弃用，怎么办？

    摘要:在npm官网查看了request依赖包的当前状态,果然在2020年就被弃用了. 本文分享自华为云社区<npm里request依赖包已经弃用?致敬并调研替代方案!>,作者: gentl ...